转载于: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,进入页面,视频自动播放,没有设置停止,视频都自动播放了 。。。
画风变得好诡异。慎选。