Vue 实现两个视频同步播放、暂停，进度条、倍速保持一致

zhengzzzzz

已于 2022-08-18 15:16:43 修改

阅读量3k

点赞数 2

文章标签：音视频 vue.js npm

于 2022-08-18 14:57:24 首次发布

本文链接：https://blog.csdn.net/zhengzzzzz/article/details/126404614

版权

这篇博客介绍了如何在Vue项目中使用vue-video-player组件来实现视频播放。首先通过npm安装并引入组件及样式，然后在main.js配置全局使用。接着在模板中创建两个视频播放器实例，并绑定了相应的事件监听器，如播放、暂停和时间更新。同时展示了如何设置视频源、播放速度等选项，并在播放位置变化时进行相应操作。

摘要由CSDN通过智能技术生成

1、安装 vue-video-player：

npm install vue-video-player --save

2、在 main.js 中引入：

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

3、在 vue 中使用：

<template>
  ...
  <!-- 视频 1 -->
  <video-player class="video-player vjs-custom-skin" ref="videoPlayer1" :options="playerOption" :playsinline="true" @play="onPlayerPlay()" @pause="onPlayerPause()" @timeupdate="onPlayerChange($event)"></video-player>
  <!-- 视频 2 -->
  <video-player class="video-player vjs-custom-skin" ref="videoPlayer2" :options="playerOption2" :playsinline="true" @play="onPlayerPlay()" @pause="onPlayerPause()" @timeupdate="onPlayerChange($event)"></video-player>
  ...
</template>

<script>
import { videoPlayer } from "vue-video-player";
import "videojs-flash";

export default {
  data() {
    currentTime: 0,
    lastPlaybackRate: "",
    videoUrl: "",
    playerOption: {
        sources: [
          {
            type: "video/mp4",
            src: "",
          },
        ],
        autoplay: true, // 如果true，浏览器准备好时开始回放
        muted: true, // 默认情况下将会消除任何音频
        loop: true, // 是否一结束就重新开始播放
        language: "zh-CN",
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        controls: true,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
        },
      },
      playerOption2: {
        sources: [
          {
            type: "video/mp4",
            src: "",
          },
        ],
        autoplay: true, // 如果true，浏览器准备好时开始回放
        muted: true, // 默认情况下将会消除任何音频
        loop: true, // 是否一结束就重新开始播放
        language: "zh-CN",
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        controls: true,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
        },
      }
  },
  components: {
    videoPlayer
  },
  methods: {
    // 点击播放
    onPlayerPlay() {
      var that1 = this.$refs.videoPlayer1;
      var that2 = this.$refs.videoPlayer2;
      that1.player.play();
      that2.player.play();
      // 调整进度条
      that1.player.currentTime(this.currentTime);
      that2.player.currentTime(this.currentTime);
    },
    // 点击暂停
    onPlayerPause() {
      var that1 = this.$refs.videoPlayer1;
      var that2 = this.$refs.videoPlayer2;
      that1.player.pause();
      that2.player.pause();
    },
    // 当前播放位置发生变化时触发
    onPlayerChange(player) {
      if (this.videoUrl != this.playerOption.sources[0].src) {
        let that1 = this.$refs.videoPlayer1;
        let that2 = this.$refs.videoPlayer2;
        that1.player.currentTime(0);
        that2.player.currentTime(0);
        that1.player.playbackRate(1.0);
        that2.player.playbackRate(1.0);
        this.videoUrl = this.playerOption.sources[0].src;
      } else {
        this.currentTime = player.cache_.currentTime;
        // 调整播放速率
        if (this.lastPlaybackRate != player.cache_.lastPlaybackRate) {
          let that1 = this.$refs.videoPlayer1;
          let that2 = this.$refs.videoPlayer2;
          that1.player.playbackRate(player.cache_.lastPlaybackRate);
          that2.player.playbackRate(player.cache_.lastPlaybackRate);
          this.lastPlaybackRate = player.cache_.lastPlaybackRate;
        }
      }
    }
  }
}
</script>