vue页面中如何引入视频播放

前段时间在开发网站时遇见一个需求，需要在页面上播放视频，且可以实现快进暂停等功能。因为前段使用vue-cli搭建的vue工程，所以特意去搜索了vue中播放视频所要的一些插件，并实现功能，特意分享出来，帮助需要的同学渡坑。闲话少说，我们直接看代码。

1.安装video.js、vue-video-player、videojs-contrib-hls

在项目所在文件夹下安装利用npm安装所需要的插件，包括video.js、vue-video-player、videojs-contrib-hls，代码如下：

npm install video.js --save
npm install vue-video-player --save
npm install videojs-contrib-hls --save

接下来解释一下对应的插件的作用，Video.js是一个基于HTML5世界而构建的网络视频播放器。它支持HTML5和Flash视频，以及YouTube和Vimeo（通过插件）。它支持桌面和移动设备上的视频播放。videojs-contrib-hls插件支持视频点播和实况播放模式、备份或冗余流、中段质量切换、AES-128段加密等一系列优势，是一款强大的插件。Vue-Video-Player是适用于 Vue 的 video.js 播放器组件。关于插件具体的使用方式及功能大家可以去npm里搜索查看。

2.在入口文件main.js中引入相关插件

在安装完成相关插件之后，需要全局引入相关文件，具体代码如下：

 import VideoPlayer from 'vue-video-player'
 Vue.use(VideoPlayer);

3.在vue页面中引入相关插件

布局的话可以自己编写一下，效果如下：

如有不足，多多指教！