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

这篇具有很好参考价值的文章主要介绍了vue video 播完第一个视频以后,再无缝衔接第二个视频并循环播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

思路:

  1. 页面中创建两个 video 标签
  2. 在组件加载时同时加载两个视频资源(autoplay),暂时不播放的视频在 canpl了解规则ay 事件中调用暂停方法,使之实现预加载
  3. 使用绝对定位将预加载的视频移出可视窗口
  4. 第一个视频结束后,通过 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;
		}

成果:

vue 播放下个视频,音视频

 可以看到视频无缝切换,实现功能 (第二个视频会loop循环,由于gif大小限制未展示)

参考链接:

vue h5 video 多视频无缝切换文章来源地址https://www.toymoban.com/news/detail-521777.html

到了这里,关于vue video 播完第一个视频以后,再无缝衔接第二个视频并循环播放的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android 自动滚动的RecyclerView,手动滑动和自动滑动无缝衔接,手动滑动时数据不重复

    概要 做一个自动滑动的列表,用于展示聊天记录或者通知栏信息等,还是使用主流的RecyclerView来做。网上有很多案例,但当手动滑动时会一直无限循环,数据重复的出现,如果想要自动滑动时能无限循环,手动滑动时又能滑到底呢?本案例就解决这种手动滑动和自动滑动无缝

    2024年01月23日
    浏览(46)
  • Vue3 实现一个无缝滚动组件(支持鼠标手动滚动)

    前言 在日常开发中,经常遇到需要支持列表循环滚动展示,特别是在数据化大屏开发中,无缝滚动使用频率更为频繁,在jquery时代,我们常用的无缝滚动组件为liMarquee,在vue中已经有vue-seamless-scroll组件(通过Vue2实现,不支持鼠标手动滚动),但是在使用过程中,发现滚动后

    2024年02月08日
    浏览(50)
  • vue-seamless-scroll(一个简单的基于vue.js的无缝滚动)

    一般在数据可视化项目中经常会看到无缝滚动的表格,即轮播表,我们可以使用 vue-seamless-scroll 来实现,使用起来也很方便  vue-seamless-scroll官网:vue-seamless-scroll NPM  Yarn  PNPM  在实际项目中可能不止一个地方使用轮播表,所以我这里还是将其封装为单独一个组件可以复用,

    2024年02月16日
    浏览(42)
  • Vue2视频播放(Video)

    Vue3视频播放(Video) 可自定义设置以下属性:   视频文件url(src),必传,默认 \\\'\\\',支持网络地址https和相对地址require(\\\'...\\\') 视频封面url(poster),默认 \\\'\\\',支持网络地址https和相对地址require(\\\'...\\\') 在未设置封面时,自动截取视频第 second 秒对应帧作为视频封面(second),默

    2024年02月06日
    浏览(43)
  • springboot + vue3实现视频播放Demo(video.js & Vue3-video-play视频播放器)

    ffmpeg官网 长时长视频java存储及vue播放解决方法 【 攻城略地 】vue3 + video.js播放m3u8视频流格式 Vue3-video-play组件官网 Vue3视频播放器组件Vue3-video-play入门教程 vue-video-player播放m3u8格式的视频 Spring boot视频播放(解决MP4大文件无法播放),整合ffmpeg,用m3u8切片播放。 Java获取MP4视频文

    2024年02月07日
    浏览(64)
  • Vue视频插件(vue-video-player)

    前言 在新的项目中用到了大量的视频,由此也学习了一款vue的前端视频播放插件,接下来分享一下 vue-video-player安装 文档 vue-video-player 安装完 可以在node_modules中查看 部分视频播放插件 vue-video-player 组件 根据自己的需求进行开发即可 取视频第一帧做背景图 要20岁了,加油

    2024年02月12日
    浏览(42)
  • 【vue】 vue 实现视频播放 vue-video-player

    注:用来测试的在线视频url地址 1.下载依赖 vue2 推荐下载指定版本依赖,不然可能下载不下来报错。 2.全局注册main.js 3.新建vue文件 下班`

    2024年02月16日
    浏览(41)
  • vue 项目中使用video实现视频播放效果暂停播放(多个视频)

    根据ref判断是否暂停状态返回 true false vue 控制video视频的播放暂停(多个视频) 安装video.js 在main.js中引用 页面

    2024年02月11日
    浏览(49)
  • 微信小程序video标签如何在其他视频播放时让另一个视频暂停播放-demo

    一个页面同时有很多视频播放,当用户点击一个视频后,开始播放视频,当点击另一个视频后,暂停前一个播放视频,让当前页面只有一个视频处于播放状态 原理 播放视频时,先判断当前是否有视频正在播放,如果没有,则播放,如果有,则暂停其他视频,再播放当前视频

    2024年02月04日
    浏览(83)
  • 【vue3播放监控视频的组件video】

    @[组件解决视频不能播放问题],一个组件直接搞定!!!! 子组件 在父组件中直接引入即可 1.引入 2.使用

    2024年04月12日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包