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

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>

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

QT5.9实现一个视频播放器播放暂停进度条
参考博主 1https://blog.csdn.net/liji_digital/article/details/83691035 参考博主2https://blog.csdn.net/qq_4107 ...
PPT 如何两个视频同步播放
用mpv实现多视频同步播放
本文方法使用的场景是多个视频在同一个屏幕上同步播放.这在对比多个比较相似的视频时非常有用.比如:在研究视频插帧方法时,对比同一个视频不同帧率的流畅度. mpv是一款免费的视频播放软件,它具有强大的命令 ...
【FFmpeg】ffplay 播放视频命令 ( 播放 | 暂停 | 停止 | 音量控制 | 进度控制 | 音频流 / 视频流 / 字幕流 / 节目切换 )
FFmpeg 系列文章目录 [FFmpeg]Windows 搭建 FFmpeg 命令行运行环境 [FFmpeg]FFmpeg 相关术语简介 ( 容器 | 媒体流 | 数据帧 | 数据包 | 编解码器 ...
html两个视频可以重叠吗,两视频叠加融合的方法步骤详解如何将两个视频重叠播放...
在网上看视频的时候,小编看过有些视频画面很特别,是将两个视频的画面重叠融合在一起播放,就是在同一个画面中播放着两个视频,其中一个看上去像是半透明的状态.这种视频制作方法用来制作MV或者舞蹈视频等,会让 ...
javascript，H5,jQuery，css“实现音乐歌词解析，歌词同步滚动，进度条拖拽、进度条同步，音量控制，歌词同步高亮的功能齐全的简易音乐播放器
用js和HTML实现一个带歌词同步,以及进度条拖拽,音量控制的简单音乐播放器. 这个音乐播放器,可以实现歌词的滚动,进度条拖拽,音乐播放进度,音量控制等功能.,资源全为网上资源,直接复制代码,便能看到 ...
Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-cir ...
AndroidStudio音乐播放器进度条和歌曲时间的操作
1.首先,我们需要使用在activity_main布局中定义好一个SeekBar和两个ListView,SeekBar表示进度条,两个ListView分别用来表示当前的时间和歌曲的总时间. 2.在Mu ...
多条语音消息合成一整条连续播放与进度条功能技术点！
多条语音汇成一整条开发最近在做一个多条语音合成一整条语音并且结合进度条可以快进或者后退功能,功能不复杂,但是所遇到的坑不少,所以我就想着把我遇到的坑写下来,希望以后有用到的小伙伴们可以少走点弯路: ...

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

1、安装 vue-video-player：

2、在 main.js 中引入：

3、在 vue 中使用：

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

最新文章

热门文章