详解vue2.0+vue-video-player实现hls播放全过程

详解vue2.0与vue-video-player实现HLS播放全过程——长沙网络推广经验分享

随着公司业务的拓展，视频点播服务的需求日益凸显。考虑到成本因素，我们决定采用开源系统来完成这项服务。尽管云视频平台提供了完整的解决方案，但在自主搭建系统的也能锻炼我们的技术实力。

在前端开发中，视频播放器是不可或缺的一部分。由于公司前端架构基于Vue全家桶，我决定寻找一款基于Vue封装的视频播放器。在社区中，我找到了vue-video-player，并进行了本地测试。

在测试过程中，我遇到了一个问题。当播放器尝试播放基于HLS协议的m3u8文件时（这些文件已在流媒体服务上成功部署），在iOS设备上能够正常播放，但在PC的Chrome浏览器上却无法播放。经过研究，我发现需要引入hls.js，并对video对象进行处理，以实现HLS的播放。尽管Dplay（vue-dplayer的封装基础）也支持HLS，但由于时间紧迫，我决定转向vue-video-player。

选择vue-video-player的原因如下：

1. 我之前使用的流媒体服务管理页面内的播放器是基于videoJs的，而vue-video-player是videoJs的封装版本，使用体验良好。

2. 在百度搜索“vue video”时，vue-video-player总是出现在搜索结果顶部，证明了其在Vue视频播放器领域的受欢迎程度。

3. vue-video-player支持的协议非常齐全，包括HLS等。

4. 尽管vue-video-player的GitHub上还存在一些未关闭的问题，但我相信凭借着VideoJs强大的库和广大的使用者群体，我们一定能够解决遇到的问题。

安装vue-video-player插件

====================

为了给我们的Vue项目添加视频播放功能，我们首先需要通过npm安装vue-video-player插件。安装命令如下：

```bash

npm install vue-video-player --save

```

接下来，我们需要引入相关的样式文件，以确保视频播放器的样式能够正确显示。由于我考虑到其他业务组件可能也会用到视频播放功能，因此将样式文件引入到main.js文件中。样式文件包括video.js的样式和vue-video-player的自定义主题样式：

```javascript

// 引入video.js的样式文件

require('video.js/dist/video-js.css')

// 引入vue-video-player的自定义主题样式

require('vue-video-player/src/custom-theme.css')

```

然后，在main.js文件中导入VueVideoPlayer组件并将其挂载到Vue上，以便在业务组件中使用：

```javascript

// 在main.js文件中导入VueVideoPlayer组件

import VideoPlayer from 'vue-video-player'

// 使用VueVideoPlayer组件

Vue.use(VideoPlayer);

```

接下来，我们编写一个名为myPlayer.vue的业务组件，用于展示视频播放功能。以下是组件的模板和脚本部分：

模板部分：

```html

```

脚本部分：

```javascript