解决手机微信浏览器视频自动播放和默认全屏问题
1.早期因为带宽和流量的因素,移动端浏览器禁止视频自动播放,现在现在流量便宜了、手机硬件越来越好了,部分可支持了
2.在移动端浏览器, video 在用户点击播放或者通过API video.play() 触发播放时,会强制以全屏置顶的形式进行播放,设计的初衷可能是因为全屏能提供更好的用户体验
<video controls="controls" src="" id="ckplayer_a1" x5-video-player-type="h6" preload="metadata" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true"x5-video-orientation="portraint" x5-video-player-fullscreen="true"></video>
playsinline="true" webkit-playsinline="true 解决ios自动播放全屏问题
x5-video-player-type="h6" x5-video-player-fullscreen="true" 解决安卓同层级播放
3.ios微信下通过 WeixinJSBridgeReady 事件进行自动播放
document.addEventListener( 'WeixinJSBridgeReady', function() { var video = document.getElementById("ckplayer_a1"); video.play(); }, false);
安卓可以尝试监听touchstart事件,用户触摸屏幕后自动播放
document.addEventListener('touchstart', function(){ var video = document.getElementById("ckplayer_a1"); video.play();}, false);
4.推荐几个好用的第三方SDK播放器
ckplayer:http://www.ckplayer.com/
阿里云:https://player.alicdn.com/aliplayer/presentation/index.html?type=preview
腾讯:https://cloud.tencent.com/document/api/267/5706
七牛的:https://developer.qiniu.com/pili/sdk/4621/web-player-sdk
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。