vue video 播完第一个视频以后,再无缝衔接第二个视频并循环播放
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
这是一个项目中的实际需求,特此记录一下
思路:
- 页面中创建两个
video
标签 - 在组件加载时同时加载两个视频资源(
autoplay
),暂时不播放的视频在canpl
了解规则ay
事件中调用暂停方法,使之实现预加载 - 使用绝对定位将预加载的视频移出可视窗口
- 第一个视频结束后,通过
ended
事件播放之前预加载的视频
核心代码:
模板:
// :class 动态控制class展示
<video ref="video" :class="{'video-hide':!playVideoTag}" @ended="onEnded('video')" autoplay="autoplay" muted="muted" src="./images/act220618/banner.mp4" class="banner-inner-video"></video>
<video ref="video1" :class="{'video-hide':playVideoTag}" @ended="onEnded('video1')" autoplay="autoplay" muted="muted" src="https://res.hc-cdn.com/cpage-pep-custom-promotion/1.0.7/images/banner_video.mp4" class="banner-inner-video"></video>
data:
data: function() {
return {
playVideoTag:true, // 是否ref video 准备播放
...
}
}
方法:
// 播放video 相关
onEnded: function(e) {
// 改变playVideoTag 实则是改变了video的class 是否显示在可视区域
this.playVideoTag = false
// 第二个视频开始播放 即第一个视频播放完成后 开始播放第二个视频;
// ... 第二个视频播放完毕时 调用该方法 再次播放 实现循环效果
this.$refs.video1.play()
this.$emit('ended')
},
playVideo: function() {
this.$refs.video.play() // 第一个video 播放
// 利用canplay事件 将第二个video暂停 实现预加载
this.$refs.video1.addEventListener('canplay', function(e) {
e.target.pause()
}, { once: true })
},
// 播放video 相关 end
mounted: function() {
this.playVideo()
}
CSS:
使用绝对定位将预加载的视频移出可视窗口
.video-hide{
position: absolute;
top: -10000px !important;
left: -10000px !important;
}
成果:
可以看到视频无缝切换,实现功能 (第二个视频会loop循环,由于gif大小限制未展示)
参考链接:
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)