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

迈不过友情╰ 2022-04-22 21:08 597阅读 0赞

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

*  前言
 *  初始化组件
 *  开始/暂停按钮
 *  停止按钮
 *  静音按钮
 *  视频播放时间
 *  全屏按钮
 *  源代码

# 前言 #

平时大家在浏览视频网站时，会发现各大视频网站都有自己的视频控制组件，虽然浏览器有原生的视频控制组件，但是不同浏览器的视频控制组件外观差异较大，功能也有限制，所以为了保证用户体验，大型视频门户网站都会使用自定义的视频播放器。

这篇文章介绍如何在Vue.js中自制一个视频播放器组件，我会用几个简单的功能抛砖引玉，带领大家初步了解视频播放器的实现方法。

**注意**：本文视频播放器中的图标都使用了[Font Awesome图标][Font Awesome]，在Vue中使用Font Awesome可能与在原生JavaScript或在其他前端框架中使用Font Awesome有所不同，如果你还不了解如何在Vue中使用，可以参考我的另外一篇文章：[在Vue中使用Font Awesome][Vue_Font Awesome]。

本文的Vue项目是用Vue CLI创建的，如果你想知道如何用Vue CLI创建项目，可以参考我的另外一篇文章：[Vue CLI 3 快速搭建项目][Vue CLI 3]。

本文是系列文章的第一篇，主要介绍组件的基本布局，以及几个按钮如开始/暂停按钮、停止按钮、音量按钮、全屏按钮的制作。

如果你想读下篇文章，请移步：[在Vue中自制视频播放器（下）][Vue]。

# 初始化组件 #

既然我们要在Vue.js中开发一个自定义的视频播放器，最好的办法就是把这样一个视频播放器做成一个Vue组件的形式，我们首先新建一个Vue组件，命名为`MyVideo.vue`，因为HTML5中已经有`<video>`标签了，所以这个组件的名称不能与现有的标签混淆，让我们先来看看最初的代码骨架的样子：

<template>
        <div class="video">
            <video class="video__player" ref="v">
                <source :src="videoSrc"/>
            </video>
            <div class="controller"></div>
        </div>
    </template>
    
    <script> export default { name: "MyVideo", props: [ 'videoSrc', ], data() { return { video: null, } }, mounted() { this.video = this.$refs.v; }, }; </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); } </style>

这个组件有一个属性，我们这里命名为`videoSrc`，表示视频的地址。

在视图内容上，这个组件应该被一个总的`<div>`包裹，其中包含一个`<video>`元素，表示视频本身，另外应该包含一个`<div>`元素，表示控制条，控制条应该是相对于父组件绝对定位，定位在下方。

注意这里我将视频的`ref`属性设置成了`v`，这是Vue的一个语法，用于注册一个元素，以便我们在Vue中直接访问，我通过这样的方式注册后，就可以通过`this.$refs.v`来访问这个元素了，因为视频控制条的各种行为都要通过使用`<video>`元素的API来实现，所以注册这个元素很有必要，关于Vue这方面的语法，请参考[官方文档][Link 1]。

我在组件生命周期函数`mounted`中把`this.video`设置成了`this.$refs.v`，相当于将这个视频元素的引用保存在了`data`中，在访问的时候更加方便，这里必须是`mounted`函数而不能是`created`函数，因为只有DOM元素已经全部加载完毕时我们才能访问到`this.$refs.v`，关于Vue组建生命周期函数的内容，可以参考[官方文档][Link 2]。

这里我把`<video>`元素的`display`属性设置成`flex`，只有这样`<video>`元素的大小才能与父元素`<div>`的大小保持一致，否则会出现视频元素的大小略微大于容器元素的大小而导致控制条位置出错的情况。

我们接下来将围绕着`<video>`元素的API进行控制条的开发，关于视频元素的API，可以参考[W3Schools][]，这里介绍了`<video>`元素的属性，方法和事件。

# 开始/暂停按钮 #

示例代码：

<template>
        <div class="video">
            <video class="video__player" ref="v" @ended="handleEnd">
                <source :src="videoSrc"/>
            </video>
            <div class="controller">
                <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>
            </div>
        </div>
    </template>
    
    <script> export default { name: "MyVideo", props: [ 'videoSrc', ], data() { return { video: null, isPaused: true, }; }, methods: { togglePlaying() { if (this.video.paused) { this.playVideo(); } else { this.pauseVideo(); } }, handleEnd() { this.pauseVideo(); }, playVideo() { this.isPaused = false; this.video.play(); }, pauseVideo() { this.isPaused = true; this.video.pause(); }, }, mounted() { this.video = this.$refs.v; }, }; </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; } </style>

我这里用CSS小小地美化了一下，本文关于CSS的内容不再赘述，UI设计方面的内容见仁见智，我仅把自己的代码贴在这里，就当抛砖引玉了。

这里加了一个按钮，同时在`data`中加了`isPaused`属性，这个属性用来记录视频是否已经暂停，因为我们需要它来决定这个图标的外观应该是播放还是暂停。每次按按钮时，将`isPaused`取反，而我们判断视频是否在播放是通过原生的`paused`属性来判断，如果视频已暂停，则开始播放，反之暂停。

还有一个特殊情况会导致视频暂停，就是视频完成了播放，所以我们监听视频元素的`ended`事件，一旦事件被触发，我们也手动更新`isPaused`属性。

# 停止按钮 #

示例代码：

<template>
        <div class="video">
            <video class="video__player" ref="v" @ended="handleEnd">
                <source :src="videoSrc"/>
            </video>
            <div class="controller">
                <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>
            </div>
        </div>
    </template>
    
    <script> export default { name: "MyVideo", props: [ 'videoSrc', ], data() { return { video: null, isPaused: true, }; }, methods: { togglePlaying() { if (this.video.paused) { this.playVideo(); } else { this.pauseVideo(); } }, stopPlaying() { this.video.currentTime = 0; this.pauseVideo(); }, handleEnd() { this.pauseVideo(); }, playVideo() { this.isPaused = false; this.video.play(); }, pauseVideo() { this.isPaused = true; this.video.pause(); }, }, mounted() { this.video = this.$refs.v; }, }; </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; } </style>

停止按钮跟上一部分按钮的基本原理相同，我们通过API将视频的时间点设置为0，同时将视频暂停，这样就相当于停止了视频的播放，关键就是这行代码`this.video.currentTime = 0`。

# 静音按钮 #

示例代码：

<template>
        <div class="video">
            <video class="video__player" ref="v" @ended="handleEnd">
                <source :src="videoSrc"/>
            </video>
            <div class="controller">
                <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>
            </div>
        </div>
    </template>
    
    <script> export default { name: "MyVideo", props: [ 'videoSrc', ], data() { return { video: null, isPaused: true, isMuted: false, }; }, methods: { 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(); }, }, mounted() { this.video = this.$refs.v; }, }; </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; } </style>

静音按钮其实跟暂停按钮有点类似，也是用了一个`isMuted`属性来手动更新静音状态以便动态渲染不同的图标，不过静音比暂停更加方便，因为`<video>`组件本身就有`muted`属性，这个属性可读又可写，通过读取这个属性我们可以直接知道视频是否被静音了，通过改变这个属性我们可以将视频静音/解除静音，所以全部的操作都可以在这一个属性上完成。视频的暂停/播放则略微复杂，因为需要调用特别的方法才能暂停或者开始播放视频。

# 视频播放时间 #

示例代码：

<template>
        <div class="video">
            <video class="video__player" ref="v" @timeupdate="handleTimeUpdate" @ended="handleEnd">
                <source :src="videoSrc"/>
            </video>
            <div class="controller">
                <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>
            </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', }; }, methods: { handleTimeUpdate() { this.videoTime = this.refreshTime(); }, 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(); }, }, mounted() { this.video = this.$refs.v; }, }; </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; } </style>

这里我们要用到`currentTime`和`duration`两个属性，一个表示当前的时间，一个表示视频总时间，我们用一个函数将这两个时间变为`分分:秒秒`这样的时间格式显示出来就可以了，但是这里有一个比较关键的问题，如何保持这个时间更新呢？

如果把上面的模板中的`{ {videoTime}}`改成`{ {refreshTime()}}`的话似乎也可以完成目标，但是这样做的话模板只会在最初的时候更新一次，随着视频的播放时间改变后，它仍然不会更新。所以我们需要做的是把这个计时器绑定到一个侦听数据上，同时通过`timeupdate`事件触发这个计时器的更新，一旦侦听数据发生变化，就会发生视图的更新，只有这样我们才能让这个计时器保持实时更新。这里的`timeupdate`还是一个`<video>`的事件，当播放时间发生变化时这个事件就会被触发，所以不管是视频正常播放，还是它被停止播放了，都可以触发计时器的更新。

# 全屏按钮 #

示例代码：

<template>
        <div class="video" ref="vcontainer">
            <video class="video__player" ref="v" @timeupdate="handleTimeUpdate" @ended="handleEnd">
                <source :src="videoSrc"/>
            </video>
            <div class="controller">
                <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', }; }, 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(); }, 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(); }, }, mounted() { this.video = this.$refs.v; }, }; </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; } </style>

这里我们加了一个全屏按钮，为了使得控制条在全屏状态下仍然可以使用，我们选择将整个容器`<div>`元素全屏，这是DOM元素的一个API，为了访问整个容器，我将整个容器也注册了。

这里我们要考虑到浏览器兼容性的状况，所以我们先通过`||`运算符来判断哪个全屏API是浏览器支持的，然后在通过`function.call`应用到元素上面去。我这里只考虑了通用的API和WebKit浏览器专用的API，在Chrome浏览器上实测是可以使用的，如果你有特别要支持的浏览器，请查阅相关浏览器的API。要注意的是，判断是否全屏，进入全屏，退出全屏这些函数在不同浏览器都可能不同，需要查阅资料。

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

上半部分的介绍就到此为止，下半部分将介绍如何制作可拖动的进度条，敬请关注。

# 源代码 #

文章中的例子的源代码已经放到GitHub，请[点击这里][Link 3]查看或下载。

[Font Awesome]: https://fontawesome.com/
[Vue_Font Awesome]: https://blog.csdn.net/zyj362633491/article/details/86422353
[Vue CLI 3]: https://blog.csdn.net/zyj362633491/article/details/85875218
[Vue]: https://blog.csdn.net/zyj362633491/article/details/86511133
[Link 1]: https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0
[Link 2]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[W3Schools]: https://www.w3schools.com/tags/ref_av_dom.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70]: /images/20220327/059e6eef89214de981398190316d2bbb.png
[Link 3]: https://github.com/DaKoala-Blog/vue-video-example