vue video 播完第一个视频以后,再无缝衔接第二个视频并循环播放

最新推荐文章于 2025-02-14 19:23:16 发布

小杨闯关之情迷代码

最新推荐文章于 2025-02-14 19:23:16 发布

阅读量7.8k

点赞数 3

文章标签：音视频

本文链接：https://blog.csdn.net/qq_39549013/article/details/126765720

版权

本文介绍了如何在Vue项目中通过HTML5 Video API实现两个视频的无缝切换，通过预加载和时机控制，实现第一个视频结束后自动播放预加载的视频，形成循环效果。关键代码展示了如何控制视频播放、暂停和移除屏幕外预加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个项目中的实际需求，特此记录一下

思路：

页面中创建两个 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大小限制未展示）

参考链接：

vue h5 video 多视频无缝切换