--- highlight: a11y-dark theme: juejin --- ![1fbc37ab-2fda-4fc5-9ca2-cbdab384aff4.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/abe769ad68be48c18153b5a98bf0fc34~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1024&h=1024&s=1058535&e=png&b=9db2bb) ## 一、背景 > 之所以要写自定义播放控件，是因为使用**navigator.mediaDevices.getUserMedia()**做视频流的时候，现实中人的右手在视频中显示在左边【*如图1*】，所以要做video镜像，但通过css（**transform：scale(-1,1)**）虽然可以将视频镜像，但是镜像后在Chrome中自带的播放控件也被翻转了【*如图2*】 *【图1】* ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81ccd7d43e9f474ba1e7a577cebc3168~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1122&h=680&s=651810&e=png&b=738281) *【图2】* ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42c207f3b08347dab18700f0d5559b2e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=965&h=670&s=351434&e=png&b=fbfbfb) 虽然可以通过**video::-webkit-media-controls**属性控制播放控件的翻转，但在某些情况下，比如全屏时，以下css可能不生效，所以这种方法只能作为一种参考。。。 ```js ``` 基于以上原因，就只能自定义播放控件了 ## 二、自定义播放控件实现基础功能（使用vue2+element-ui） 1. 播放、暂停按钮 2. 当前播放时间/总时长 3. 进度条、点击及拖动进度条可正常播放 4. 音量控制 5. 使用transition元素实现播放控件fade显隐 ***最终实现结果如下图*** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc69a354b8e24edd8a0bcf88d0adb38d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=810&h=546&s=164519&e=png&b=fcfcfc) #### 1、播放、暂停视频 > 主要利用video自带的play\pause方法控制，没有什么特别的。 > > 另外，为了在点击除按钮外的其他视频区域也能控制播放，在video上增加了click事件，执行togglePlay方法 ```js // html--start // 视频播放区

// 控制播放按钮 // html--end // methods togglePlay() { const video = this.$refs.videoPlayer; if (video.paused) { video.play(); this.isPlaying = true; } else { video.pause(); this.isPlaying = false; } } ``` ### 2、当前播放时间/总时长 > （1）视频总时长**duration**：在视频数据加载完的**loadedmetadata**方法中获取**video.duration**进行更新 > > （2）当前播放的时间位置：通过**video**的**timeupdate**方法更新**currentTime** > > **注：**有些视频的**duration**可能为**Infinity**，即无限大时长，这是由于视频文件可能存在异常，导致无法读取视频时长，所以在**getDuration**方法做了异常处理 ```js // html {{ formatTime(currentTime) }} / {{ formatTime(duration) }} // methods // 获取视频总时长 getDuration() { this.videoPlayer = this.$refs.videoPlayer; if (this.videoPlayer) { // 异常处理，其中item.duration为当前录制视频的时长，在录制时记录，如果不存在录制场景，请忽略，都没取到给个默认值5s，防止进度条异常 this.duration = Number.isFinite(this.videoPlayer.duration) ? this.videoPlayer.duration : this.item.duration || 5; } }, // 更新当前播放的时间 updateProgressBar() { this.getDuration(); // 如果在拖拽中、不更新时间 if (this.isDraging) { return; } if (this.videoPlayer) { this.currentTime = this.videoPlayer.currentTime; } }, // 格式化时间 formatTime(seconds) { const format = val => `0${Math.floor(val)}`.slice(-2); const hours = seconds / 3600; const minutes = (seconds % 3600) / 60; seconds = seconds % 60; if (hours < 1) { return [minutes, seconds].map(format).join(":"); } return [hours, minutes, seconds].map(format).join(":"); } ``` ### 3、进度条 > 进度条的位置：currentTime，进度条max=duration总时长 > > 拖动进度条播放需要注意两种情况： > > （1）视频暂停时播放： > > 拖动结束后，需要从拖动的终止位置开始自动播放 > > 解决：changeProgress中调用video.play方法即可 > > （2）视频播放中拖动播放： > 拖动进度条播放不能从拖动的终止位置开始播放，而是从拖动之前的位置开始播放 > > 原因：因为是在播放中，所以视频的**timeupdate**方法一直在执行，也就是**currentTime**一直在更新，这也就导致**el-slider的当前位置也在更新** > > 也就是说**currentTime变化受以下两种情况的影响** > > 【1】用户手动拖动进度条 > > 【2】是视频播放时timeupdate的事件执行的updateProgressBar一直在执行 > > 所以需要**在用户开始拖动时禁止更新updateProgressBar中的currentTime** > > 同时由于el-slider 没有监听开始拖拽的事件，所以使用原生js监听mousedown事件 ```js // html mounted() { // 由于el-slider 没有监听开始拖拽的事件，所以使用原生js监听mousedown事件 // 获取滑块的DOM元素 const sliderButton = this.$refs.progressSlider.$el.querySelector( ".el-slider__button-wrapper" ); // 监听mousedown事件 sliderButton.addEventListener("mousedown", this.handleDragStart); sliderButton.addEventListener("touchstart", this.handleDragStart); }, // methods // 更新当前播放时间、进度条位置 updateProgressBar() { this.getDuration(); // 如果在拖拽中、不更新时间 if (this.isDraging) { return; } if (this.videoPlayer) { this.currentTime = this.videoPlayer.currentTime; } }, // 滑块结束拖动 changeProgress(value) { this.isDraging = false; this.videoPlayer.currentTime = value; this.videoPlayer.play(); this.isPlaying = true; }, // 进度开始拖拽，停止视频播放 handleDragStart() { this.isDraging = true; this.videoPlayer.pause(); } ``` ### 4、音量控制 > 音量控制很简单，更新video的volume属性即可 ```js // html 音量 // methods // 音量变化 changeVolume(value) { this.videoPlayer.volume = value / 100; } ``` ### 5、控件显隐 >使用transition元素+mouseleave/mouseover组合实现，就不做赘述，详见下面的完整代码以上就是播放/暂停控制、当前播放时间/总时长、进度条控制、音量控制几个基础功能的实现了，以下是完整代码 ## 三、完整代码 ```js ``` 代码之路漫漫~ 一坑接一坑，但填坑的过程也有那么点意思，哈哈~ 与君共勉！以上就是今天的全部内容啦，如有错误，欢迎指正~~