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

前言

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

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

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

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

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

如果你想读下篇文章，请移步：在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这方面的语法，请参考官方文档。

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

这里我把<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