vue实现视频自动播放

<button @click="play = !play">播放</button>
<video src="./video/rpa10.0.mp4" autoplay v-if="play"></video>

data() {
	return {
	  play: false
   }
}

首先将video标签隐藏起来,合适的时候将他显示出来,就可以播放了,
**注意:video标签一定要设置 autoplay **

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Vue前端中实现视频队列自动播放功能,可以通过以下步骤来实现: 1. 首先,在Vue组件中引入需要的视频资源,可以使用HTML的video标签来嵌入视频,并设置一个唯一的ref属性,以便在后续操作中引用该视频元素。 2. 在data中定义一个视频队列的数组,用来存放需要播放的视频列表。可以将每个视频信息定义为一个对象,包括视频地址、标题等。 3. 在mounted生命周期钩子函数中,初始化时可以设置一个计时器,用来监听视频是否播放完成,并切换到下一个视频。可以使用video元素的ended事件来监听视频播放完毕,当该事件触发时,调用一个方法来判断是否还有下一个视频可播放,如果有,则自动播放下一个视频。 4. 在方法中,设定逻辑,判断当前播放的视频是否为队列中的最后一个视频,如果是,则停止自动播放,否则将下一个视频的信息读取出来,并设置为视频的源地址,然后调用video元素的play方法来播放下一个视频。 5. 在模板中,可以使用v-for指令来遍历视频队列,渲染每个视频元素的标题,并将其与方法中的对象绑定,以便在方法中获取到当前视频的信息。 通过以上步骤,就可以实现Vue前端的视频队列自动播放功能。用户可以通过添加、删除视频来动态修改队列,播放器会自动切换到下一个视频,并循环播放,直到队列中没有视频为止。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值