解决uniapp手机浏览器视频封面不显示问题

转载于：https://www.jianshu.com/p/630832d0dd96

作者：小凖
链接：https://www.jianshu.com/p/630832d0dd96
 

作者思路：视频加载好自动播放，自动播放后立即停止播放，页面停止，达到显示封面的效果。

代码分析：

<video 
    id="myVideo" 
    :autoplay="true" -- 自动播放，必需
    :src="videoUrl" 
    :controls="true" -- 播放控件，必需 
    @timeupdate="timeupdate" -- 播放进度变化时触发事件
></video>

// 播放进度变化时触发
timeupdate(e) {
    if (this.init && e.detail.currentTime > 0) {   //判断播放大于0秒
        this.init = false  //初始化
        this.videoContext = uni.createVideoContext('myVideo') //获取id
        this.videoContext.pause() //调用暂定视频的方法
    }
}

经调试发现： 使用v-if 、autoplay、controls 亦可解决问题

(ˇˍˇ)  骇.....

<video 
    v-if="videoUrl" 
    :autoplay="true" -- 自动播放，必需
    :controls="true" -- 播放控件，必需 
    :src="videoUrl"     
></video>

后期发现，此处有个BUG，进入页面，视频自动播放，没有设置停止，视频都自动播放了 。。。

画风变得好诡异。慎选。