1，前言

有些项目中，或者是视频网站，都需要视频播放功能。我们可以用H5的video标签实现播放，但是原生的样子视频播放器不太好看，功能也需要自己封装。这时候可以站在巨人的肩膀上，使用已造好的轮子vue-video-player

2，介绍

vue-video-player目前在Github上拥有3.9K的star，拥有一系列的监听和事件回调，自带有倍速，全屏，拖动进度条和音量调节等功能，很实用。

详细文档地址：vue-video-player文档

3，安装和使用

安装：

npm install vue-video-player --save

全局引入：

// main.js中
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

局部引入：

// 在组件中引入
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
// 注册
components: { videoPlayer }

HTML部分：

PS：class名vjs-big-play-centered是播放按钮居中

<template>
	<div id="player">
		<video-player
			ref="videoPlayer"
			class="video-player vjs-big-play-centered"
			:playsinline="false"
			:options="playOptions"
			@ready="onPlayerReady"
			@play="onPlayerPlay($event)"
			@pause="onPlayerPause($event)"
			@ended="onPlayerEnd($event)"
		/>
	</div>
</template>

less部分：

#player{
	width: 1000px;
	height: 500px;
	margin: 0 auto;
}

事件部分：

methods: {
	// 准备好了
	onPlayerReady(v) {
		console.log(1)
		console.log(v)
	},
	// 播放了
	onPlayerPlay(v) {
		console.log(2)
		console.log(v)
	},
	// 暂停了
	onPlayerPause(v) {
		console.log(3)
		console.log(v)
	},
	// 播放结束了
	onPlayerEnd(v) {
		console.log(4)
		console.log(v)
	}
}

效果图

后记

写完之后才发现DPlayer更好用，文档更全更好，懒得换了。

---

如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；END

PS：在本页按F12，在console中输入document.querySelectorAll('.tool-item-href')[0].click()，有惊喜哦~

往期文章

• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 超详细！Vue-Router手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金