平时大家在浏览视频网站时,会发现各大视频网站都有自己的视频控制组件,虽然浏览器有原生的视频控制组件,但是不同浏览器的视频控制组件外观差异较大,功能也有限制,所以为了保证用户体验,大型视频门户网站都会使用自定义的视频播放器。
这篇文章介绍如何在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中已经有标签了,所以这个组件的名称不能与现有的标签混淆,让我们先来看看最初的代码骨架的样子:
<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
,表示视频的地址。
在视图内容上,这个组件应该被一个总的 注意这里我将视频的 我在组件生命周期函数 这里我把 我们接下来将围绕着 示例代码: 我这里用CSS小小地美化了一下,本文关于CSS的内容不再赘述,UI设计方面的内容见仁见智,我仅把自己的代码贴在这里,就当抛砖引玉了。 这里加了一个按钮,同时在 还有一个特殊情况会导致视频暂停,就是视频完成了播放,所以我们监听视频元素的 示例代码: 停止按钮跟上一部分按钮的基本原理相同,我们通过API将视频的时间点设置为0,同时将视频暂停,这样就相当于停止了视频的播放,关键就是这行代码 示例代码: 静音按钮其实跟暂停按钮有点类似,也是用了一个 示例代码: 这里我们要用到 如果把上面的模板中的 示例代码: 这里我们加了一个全屏按钮,为了使得控制条在全屏状态下仍然可以使用,我们选择将整个容器 这里我们要考虑到浏览器兼容性的状况,所以我们先通过 运行效果: 上半部分的介绍就到此为止,下半部分将介绍如何制作可拖动的进度条,敬请关注。 文章中的例子的源代码已经放到GitHub,请点击这里查看或下载。元素,表示视频本身,另外应该包含一个
ref
属性设置成了v
,这是Vue的一个语法,用于注册一个元素,以便我们在Vue中直接访问,我通过这样的方式注册后,就可以通过this.$refs.v
来访问这个元素了,因为视频控制条的各种行为都要通过使用元素的API来实现,所以注册这个元素很有必要,关于Vue这方面的语法,请参考官方文档。
mounted
中把this.video
设置成了this.$refs.v
,相当于将这个视频元素的引用保存在了data
中,在访问的时候更加方便,这里必须是mounted
函数而不能是created
函数,因为只有DOM元素已经全部加载完毕时我们才能访问到this.$refs.v
,关于Vue组建生命周期函数的内容,可以参考官方文档。元素的
display
属性设置成flex
,只有这样元素的大小才能与父元素
元素的API进行控制条的开发,关于视频元素的API,可以参考W3Schools,这里介绍了
元素的属性,方法和事件。
开始/暂停按钮
<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>
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>
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
属性来手动更新静音状态以便动态渲染不同的图标,不过静音比暂停更加方便,因为组件本身就有
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
还是一个的事件,当播放时间发生变化时这个事件就会被触发,所以不管是视频正常播放,还是它被停止播放了,都可以触发计时器的更新。
全屏按钮
<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>
||
运算符来判断哪个全屏API是浏览器支持的,然后在通过function.call
应用到元素上面去。我这里只考虑了通用的API和WebKit浏览器专用的API,在Chrome浏览器上实测是可以使用的,如果你有特别要支持的浏览器,请查阅相关浏览器的API。要注意的是,判断是否全屏,进入全屏,退出全屏这些函数在不同浏览器都可能不同,需要查阅资料。
源代码