在Vue中自制视频播放器（下）

骑猪看日落 2022-03-26 09:10 256阅读 0赞

### 在Vue中自制视频播放器（下） ###

*  前言
 *  进度条基本原理
 *  进度条随时间自动更新
 *  进度条拖动
 *  自动隐藏控制条
 *  源代码

# 前言 #

本文是系列文章的下篇，如果你还没有读过上篇文章，可以移步：[在Vue中自制视频播放器（上）][Vue]。

在上篇文章中我们已经完成了播放/暂停按钮、停止按钮、静音按钮、播放时间和全屏按钮的制作，代码和演示效果都可以在上一篇文章中找到，在这篇文章中我们就要完成视频播放器的核心部分——进度条。

这篇文章我将改变一下演示的思路，我会在开头直接放出完整代码，然后会在每一个小节中对功能性的代码进行分析，让读者能理解每一部分的代码都是做什么的。

完整代码：

<template>
        <div class="video" @pointermove.prevent="handleMouseMove($event)" @pointerup.prevent="stopDragging" @pointerleave="handleMouseLeave" @pointerenter="handleMouseEnter" ref="vcontainer">
            <video class="video__player" ref="v" @timeupdate="handleTimeUpdate" @ended="handleEnd">
                <source :src="videoSrc"/>
            </video>
            <div class="controller" v-show="isControlVisible">
                <div class="controller__progress-wrapper">
                    <div class="controller__progress" ref="p" @click="handleProgressClick($event)">
                        <div class="controller__progress controller__progress--passed" :style="{ width: videoProgressPercent}"></div>
                        <div class="controller__dot" :style="{ left: videoProgressPercent}" @pointerdown="startDragging($event)">
                            <div class="controller__inner-dot"></div>
                        </div>
                    </div>
                </div>
                <div class="controller__btn-wrapper">
                    <div class="controller__btn" @click="togglePlaying">
                        <font-awesome-icon :icon="['fas', 'play']" v-if="isPaused"></font-awesome-icon>
                        <font-awesome-icon :icon="['fas', 'pause']" v-else></font-awesome-icon>
                    </div>
                    <div class="controller__btn" @click="stopPlaying">
                        <font-awesome-icon :icon="['fas', 'stop']"></font-awesome-icon>
                    </div>
                    <div class="controller__btn" @click="toggleMute">
                        <font-awesome-icon :icon="['fas', 'volume-up']" v-if="isMuted"></font-awesome-icon>
                        <font-awesome-icon :icon="['fas', 'volume-mute']" v-else></font-awesome-icon>
                    </div>
                    <div class="controller__timer">
                        {
       {videoTime}}
                    </div>
                    <div class="controller__btn controller__btn--fullscreen" @click="toggleFullscreen">
                        <font-awesome-icon :icon="['fas', 'expand']"></font-awesome-icon>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script> function secToTimer(originalSec) { const min = Math.floor(originalSec / 60); const sec = Math.floor(originalSec % 60); const minStr = min < 10 ? `0${ min}` : String(min); const secStr = sec < 10 ? `0${ sec}` : String(sec); return `${ minStr}:${ secStr}`; } export default { name: "MyVideo", props: [ 'videoSrc', ], data() { return { video: null, isPaused: true, isMuted: false, videoTime: '00:00 / 00:00', isDragging: false, isControlVisible: false, hidingEvent: null, videoProgress: 0, draggingStartX: 0, dotOffsetX: 0, progress: null, }; }, computed: { videoProgressPercent() { return `${ this.videoProgress * 100}%`; }, }, methods: { toggleFullscreen() { const isFullscreen = document.webkitIsFullScreen || document.fullscreen; if (isFullscreen) { const exitFunc = document.exitFullscreen || document.webkitExitFullscreen; exitFunc.call(document); } else { const element = this.$refs.vcontainer; const fullscreenFunc = element.requestFullscreen || element.webkitRequestFullScreen; fullscreenFunc.call(element); } }, handleTimeUpdate() { this.videoTime = this.refreshTime(); this.videoProgress = this.video.currentTime / this.video.duration; }, refreshTime() { if (!this.video) { return `${ secToTimer(0)} / ${ secToTimer(0)}`; } const currTime = this.video.currentTime || 0; const duration = this.video.duration || 0; return `${ secToTimer(currTime)} / ${ secToTimer(duration)}`; }, togglePlaying() { if (this.video.paused) { this.playVideo(); } else { this.pauseVideo(); } }, stopPlaying() { this.video.currentTime = 0; this.pauseVideo(); }, toggleMute() { this.video.muted = !this.video.muted; this.isMuted = this.video.muted; }, handleEnd() { this.pauseVideo(); }, playVideo() { this.isPaused = false; this.video.play(); }, pauseVideo() { this.isPaused = true; this.video.pause(); }, setProgress(x) { const progressRect = this.progress.getBoundingClientRect(); let progressPercent = (x - progressRect.left) / progressRect.width; if (progressPercent < 0) { progressPercent = 0; } else if (progressPercent > 1) { progressPercent = 1; } this.video.currentTime = this.video.duration * progressPercent; }, hideControlBar() { const isFullscreen = document.webkitIsFullScreen || document.fullscreen; if (isFullscreen) { this.hideCursor(); } this.isControlVisible = false; }, showControlBar() { this.isControlVisible = true; }, hideCursor() { document.body.style.cursor = 'none'; }, showCursor() { document.body.style.cursor = 'default'; }, handleProgressClick(event) { const clickX = event.clientX; this.setProgress(clickX); }, startDragging(event) { this.pauseVideo(); this.isDragging = true; this.draggingStartX = event.clientX; }, moveDragging(event) { if (this.isDragging) { const offsetX = event.clientX - this.draggingStartX; this.dotOffsetX = offsetX < 0 ? 0 : offsetX; this.setProgress(event.clientX); } }, stopDragging() { this.isDragging = false; this.dotOffsetX = 0; }, handleMouseMove(event) { this.showControlBar(); this.showCursor(); if (this.hidingEvent !== null) { clearInterval(this.hidingEvent); } this.hidingEvent = setInterval(this.hideControlBar, 3000); this.moveDragging(event); }, handleMouseLeave() { this.hideControlBar(); this.stopDragging(); }, handleMouseEnter() { this.showControlBar(); }, }, mounted() { this.video = this.$refs.v; this.progress = this.$refs.p; }, }; </script>
    
    <style scoped> .video { position: relative; } .video__player { width: 100%; height: 100%; display: flex; } .controller { flex-direction: column; height: 50px; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); } .controller__btn-wrapper { position: relative; height: calc(100% - 5px); display: flex; align-items: center; color: #fff; padding: 0 18px; } .controller__btn { cursor: pointer; transition: 0.5s; margin: 0 20px; } .controller__btn:hover { color: #409eff; } .controller__timer { margin-left: 15px; } .controller__btn--fullscreen { position: absolute; right: 15px; } .controller__progress-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; } .controller__progress { height: 5px; position: relative; width: calc(100% - 30px); border-radius: 100px; background: #dcdcdc; cursor: pointer; } .controller__progress--passed { position: absolute; top: 0; left: 0; background: #409EFF; } .controller__dot { position: absolute; z-index: 50; left: 0; top: -5px; width: 15px; height: 15px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; } .controller__inner-dot { width: 5px; height: 5px; border-radius: 50%; background-color: #409EFF; } </style>

运行效果：  
![最终效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70]

# 进度条基本原理 #

这个进度条的原理就是先创建一个`<div>`元素，作为进度条的背景，然后根据进度的百分比，创建另一个定位为`absolute`的子`<div>`元素，作为已过进度，同时根据这个百分比创建另外一个`<div>`元素，用样式将它变成圆形，定位也应该是`absolute`，作为可以拖动的部分。要注意，这个圆形的进度点上要绑定一些事件，使得它在被拖动的时候能更新视频的播放时间，同时将这个变化反映在进度条的颜色变化上。

# 进度条随时间自动更新 #

在上篇文章中，我们讨论了`<video>`元素的`timeupdate`事件，每当视频的播放时间改变时这个事件就会触发，也就是说，在视频正常播放的情况下，这个事件会被频繁触发，这个事件可以作为视频进度条更新的时间点。

相关代码：

handleProgressClick(event) { 
        const clickX = event.clientX;
        this.setProgress(clickX);
    },
    setProgress(x) { 
        const progressRect = this.progress.getBoundingClientRect();
        let progressPercent = (x - progressRect.left) / progressRect.width;
        if (progressPercent < 0) { 
            progressPercent = 0;
        } else if (progressPercent > 1) { 
            progressPercent = 1;
        }
        this.video.currentTime = this.video.duration * progressPercent;
    },
    startDragging(event) { 
        this.pauseVideo();
        this.isDragging = true;
        this.draggingStartX = event.clientX;
    },
    moveDragging(event) { 
        if (this.isDragging) { 
            const offsetX = event.clientX - this.draggingStartX;
            this.dotOffsetX = offsetX < 0 ? 0 : offsetX;
            this.setProgress(event.clientX);
        }
    },
    stopDragging() { 
        this.isDragging = false;
        this.dotOffsetX = 0;
    },

我这里绑定了几个事件，其中`startDragging`表示拖动开始时鼠标按下的动作，这个事件绑定在了圆形按钮上，`moveDragging`表示拖动过程中鼠标的移动事件，而`stopDragging`表示拖动结束后鼠标松开的事件，后面这两个事件我绑定在了容器元素上，因为在拖动的过程中，无法保证鼠标一直悬浮在圆形按钮上，只有把事件绑定到最顶层的容器上，才能完整获取到事件的过程和结束。

这一系列事件的原理就是当按下鼠标时，记录下鼠标相对于可视部分窗口的X坐标，当鼠标正在移动时，根据鼠标当前位置和起始位置的X坐标的差值，除以整个进度条的总长度，就可以得到一个移动的比例，当我们得到这个移动比例时，更新进度条的长度，并用这个比例乘上视频总长度得到一个移动时间，在当前播放时间加上或减去这个移动时间，就得到了新的视频播放时间。

要注意的是，我们要处理用户把鼠标移动到进度条零点左边的位置这种行为，所以在计算时还要考虑边界点，不能让进度按钮的位置变成负值。

有了拖动进度条的实现，用户点击进度条任意位置的跳转也就变得比较简单了，这里要处理的是用户点击位置的X坐标和当前进度点的X坐标的差值，有了这个差值，其余的逻辑与拖动进度条相似。

这里还有一个要注意的小点，当我们发现用户要拖动进度条时，要暂停视频，暂停视频的操作只要绑定到`startDragging`这个记录用户开始拖动的事件即可。

到这里为止，进度条就完成了。

# 自动隐藏控制条 #

我们平时在看视频时会发现，如果鼠标一直没有动作，视频控制条会自动隐藏，如果在全屏的情况下，鼠标也会被隐藏，这样用户在看视频的时候会有更好的体验，这一部分我们就来实现自动隐藏控制条的功能，给我们的播放器锦上添花。