今天在做一个分享页面的时候需要播放视屏用了video,然后各种坑开始了:
<video src="http://xxx.mp4 " id="myVideo" poster=“XXX” controls></video>
在安卓微信 内:播放全屏并且定位在视屏上的一些东西也不见了?于是接入了同层
<video src="http://xxx.mp4 " id="myVideo" poster=“XXX” controls x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>
注: x5-video-player-type、x5-video-player-fullscreen属性需要在播放前设置好,播放之后设置无效
此时视屏上的一些东西看见了,但是$(window).width();$(window).height()设置后不能铺满整平,同层播放的时候呢出现上下黑边,
折腾了一番用了screen.width ; screen.height
此时进入同层的时候能够全屏播放了,但是呢页面刚进入未播放时候出现了滚动条,而我想要的就是占满手机屏幕就行了。反复测试了下在安卓内:
$(window).height() : 获取的高度是内容区域不加导航区域,而 screen.height 是整个手机区域
还有安卓进入同层上面有个返回按钮,点击后视屏停止播放难看,于是改变了下形式不要默认播放按钮,不要默认poster加封面;自己写了个播放按钮
<video src="http://xxx.mp4 " id="myVideo" x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>
通过监听处理:
myVideo.addEventListener('play',function(){})
myVideo.addEventListener('pause',function(){})
此时坑已经差不多了,但是 ios 内坑继续了
ios内联播放需要加上:<video src="http://xxx.mp4 " id="myVideo" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>
兼容各种全屏状态
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
$("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
}else if (/android/.test(ua)) {
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//微信 解决同层时候上下黑边
test_video.style.width = screen.width + "px";
test_video.style.height = screen.height + "px";
}else{
//QQ微博等
$("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
}
}else{
$("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
}
还有通过object-position 设置显示位置、视屏是否铺满容器
myVideo.style["object-position"]= "0px 0px" //顶部
var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)
myVideo.style["object-position"]= "0px " + offsetY + "px" //底部
myVideo.style["object-fit"]= "fill" //视屏铺满容器
通过上面,通过特定布局在同层内还是可以实现假象的内联播放的,上面视屏,下面区域加上滚动条来处理