vue2 中 video 循环播放
时间: 2024-08-15 14:07:01 浏览: 30
在 Vue.js 版本2.x 中,为了实现 video 元素循环播放,您可以在 `mounted` 或者 `created` 生命周期钩子中初始化 video 播放,并设置 `loop` 属性来开启循环模式。
下面是一个基本示例:
```html
<template>
<div id="app">
<!-- 使用 v-bind 来绑定视频文件 -->
<video :src="videoSrc" controls ref="myVideo" @play="onPlay" loop></video>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
// 存储视频源路径
videoSrc: '/path/to/your/video.mp4'
}
},
methods: {
onPlay() {
console.log('视频开始播放');
},
// 开始循环播放
startLoopPlayback() {
if (this.$refs.myVideo) {
this.$refs.myVideo.loop = true;
}
}
},
mounted() {
// 将开始循环播放的行为放在组件挂载完成之后
this.startLoopPlayback();
}
}
</script>
```
在这个例子中,我们创建了一个包含 video 元素的模板,并设置了 `controls` 和 `ref` 属性以便稍后引用它。我们在数据属性中存储了视频的源路径。
然后,在 JavaScript 部分,我们添加了一些方法。`startLoopPlayback` 方法会检查是否存在 `myVideo` 引用,并将 `loop` 属性设为 `true` 以启动循环播放。这将在组件挂载完毕后自动执行。
此外,我们还添加了一个 `onPlay` 方法,用于监听当视频开始播放时触发的日志消息。这个部分可以根据需要修改,以执行特定的操作,比如开始计时、记录事件等。
-