乐趣区

h5中video标签的使用

jiezi

video 标签参数

参数 值 形容
x5-video-player-type h5-page 在 x5 内核浏览器中（安卓的 qq、微信），视频不脱离文档流
webkit-playsinline true ios 10 中设置能够让视频在小窗内播放
playsinline true 视频在小窗内播放
preload autononemeta 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 标签，每次要播放时再加载视频