在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>