h5中video标签的使用

video标签参数

参数	值	描述
x5-video-player-type	h5-page	在x5内核浏览器中（安卓的qq、微信），视频不脱离文档流
webkit-playsinline	true	ios 10中设置可以让视频在小窗内播放
playsinline	true	视频在小窗内播放
preload	auto/none/meta	auto时，自动进行预加载，none时，不进行预加载，meta时，只载入元数据
autoplay	autoplay	则视频在就绪后马上播放。
loop	loop	循环播放

事件

事件	描述
play	播放视频
pause	暂停视频

play事件

控制视频播放，返回一个promise对象，可用于判断视频是否能播放

let video=this.$refs.video[0]
video.load()
video.play()
.then(res=>{
    //视频播放成功回调
})
.catch(function(err) {
    //视频播放失败回调
    Toast('该视频暂不支持播放');
});

特殊场景

1. ios系统的微信中，非click情况下，video.play()失效

场景： 需要页面滑动到指定位置时播放视频，但视频播放失败
原因： 可能微信做了某些处理，必须click事件内，video.play()才有效果
解决方法：暂无

2. 低版本的安卓（安卓7）中，多个video标签

场景： 低版本的安卓系统中，点击多个视频播放后会导致一些视频首帧置灰展示
原因： 可能是内存问题
解决方法： 只使用一个video标签，每次要播放时再加载视频