Vue 实现视频循环播放前 3 秒

最新推荐文章于 2024-08-20 13:48:18 发布

秋子丫

最新推荐文章于 2024-08-20 13:48:18 发布

阅读量1k

点赞数 2

分类专栏： Vue JavaScript 文章标签： vue.js 音视频

本文链接：https://blog.csdn.net/qq_41548644/article/details/120938651

版权

JavaScript 同时被 2 个专栏收录

16 篇文章 4 订阅

订阅专栏

Vue

8 篇文章 4 订阅

订阅专栏

一、需求说明

视频自动播放且循环播放前 3 秒

效果如下：

二、实现 Demo

安装 vue-video-player 依赖

yarn add vue-video-player

完整代码：

<template>
  <video-player
    ref="videoPlayer"
    class="video-player-box"
    :options="playerOptions"
    @timeupdate="onPlayerTimeupdate($event)"
  />
</template>

<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'

export default {
  name: 'Home',
  components: { videoPlayer },
  data () {
    return {
      playerOptions: {
        width: 300,
        height: 500,
        muted: true,
        autoplay: true,
        controls: false,
        sources: [{
          type: 'video/mp4',
          src: 'http://qiuzi-resource.oss-cn-shenzhen.aliyuncs.com/video.MP4'
        }]
      }
    }
  },
  methods: {
    onPlayerTimeupdate (player) {
      const currentTime = Number.parseInt(player.currentTime())
      
      // 循环播放前 3 秒
      if (currentTime === 3) {
        player.currentTime(0)
      }
    }
  }
}
</script>

<style lang="scss">
.video-player-box {
  video {
    object-fit: cover;
  }
}
</style>