video在微信浏览器中的一些问题及解决方案
最近在做微信浏览器中的页面,由于客户需要常常需要内嵌或全屏播放视频。但是在实现过程中问题却是常有常新的。
1.html书写
这是最近做的一个全屏播放的案例(视频是竖版的),html代码如下:
<video id="video" src="http://yili.yowoworld.com/haier1213/video1.mp4" poster="http://yili.yowoworld.com/haier1213/poster.jpg" preload="auto" playsinline x-webkit-airplay webkit-playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" type="video/mp4" style="object-fit:fill;" width="100%" height="100%"></video>
给视频设置了以上属性,在ios和安卓手机中就都可以全屏播放了。
2.video属性设置说明
preload:预加载
playsinline / webkit-playsinline : 内联播放
x-webkit-airplay: 貌似是ios的无线播放
x5-video-player-type:启用同层H5播放器,就是在视频全屏的时候,div可以呈现在视频层上,也是WeChat安卓版特有的属性。
x5-video-player-fullscreen: 全屏设置。
在实现视频在微信中播放过程中,添加属性性和属性值要慎重,不能随便设置,设置过程中需要细细体会。
3.遇到的问题及解决方案
问题1: 在Android的微信里面,就算加上了这个属性(x5-video-player-fullscreen),还会出现上下有黑边,不能全屏的问题。
解决办法: 给video加上object-fit:;的style属性。
问题2: 当微信和手机设置的“允许屏幕旋转”同时开启时,在安卓手机中,视频不会跟随系统旋转,而在苹果手机中,视频跟随系统旋转,当旋转完,视频往往就不是满屏了。
解决办法:
window.onresize = function(){
var width = window.screen.width;
var height = window.screen.height;
if(width>height){
width = [height,height = width[0]];
video.style.width = width + "px";
video.style.height = height + "px";
}
}
4.在全屏视频中添加元素
至于在全屏视频中添加元素,也是可以的。只要通过定位设置即可。通过监听视频的当前时间,来实现你想要的效果。
监听视频时间需要通过定时器来实现(定时器的时间根据项目实际需要自行定义)
setInterval(function(obj,t){
if(obj.currentTime=t){ //可以不使用等号,条件自己看着来
//满足当前条件时的相关事件
}
},100)
补充一下:在这里也可以使用video 的timeupdate 事件
timeupdate事件 通常与 Audio/Video 对象的 currentTime 属性一起使用,该属性返回音频/视频(audio/video)的播放位置(以秒计)。