vue3同步播放视频

最新推荐文章于 2025-04-24 10:22:54 发布

我爱画页面

最新推荐文章于 2025-04-24 10:22:54 发布

阅读量481

点赞数

CC 4.0 BY-SA版权

文章标签：音视频 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qdm13209211861/article/details/129439672

用到的视频播放插件是vue3-video-play

npm安装：npm i vue3-video-play --save
yarn安装：yarn add vue3-video-play --save

使用

全局引入，在main.js中写入：

import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
app.use(vue3videoPlay)

页面写入组件：

<!-- 视频同步播放对比 -->
      <div class="video_box_flex">
        <div class="video_box" style="border-radius: 18px 0 0 18px">
          <div class="video_title">修复前</div>
          <vue3VideoPlay v-bind="options" ref="videoPlayer1" @play="onPlayerPlay" @pause="onPlayerPause" />
        </div>
        <div class="video_box" style="border-radius: 0 18px 18px 0; margin-left: 20px">
          <div class="video_title">修复后</div>
          <vue3VideoPlay v-bind="options" ref="videoPlayer2" @play="onPlayerPlay" @pause="onPlayerPause" />
        </div>
      </div>

js方法：

<script setup>
import videoUrl from "@/assets/video/test2.mp4";
import { reactive, ref } from "vue";
let videoPlayer1 = ref(null);
let videoPlayer2 = ref(null);
const options = reactive({
  width: "100%", //播放器宽度
  height: "", //播放器高度
  color: "#FFC205", //主题色
  title: "", //视频名称
  src: videoUrl, //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
});
// 点击播放
function onPlayerPlay() {
  videoPlayer1.value.play();
  videoPlayer2.value.play();
}
// 点击暂停
function onPlayerPause() {
  videoPlayer1.value.pause();
  videoPlayer2.value.pause();
}
</script>