在当前的Web开发中，视频播放功能是必不可少的一部分。Vue.js作为前端开发中非常流行的框架，它的一个插件vue-video-player可以帮助开发者非常方便地在Vue项目中集成视频播放功能。本文将详细介绍vue-video-player的使用心得，尤其是如何使其支持m3u8格式视频的播放。
我们需要了解如何在Vue项目中安装vue-video-player插件。通过npm安装命令：
```bash
npm install vue-video-player --save
```
然后在项目的main.js文件中引入并注册vue-video-player：
```javascript
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
```
这样，我们就完成了插件的安装和初始化工作。
接下来，我们需要在页面中引入<video-player>组件，并通过ref属性获取组件实例，用于后面的方法绑定和控制：
```html
<video-player
ref="videoPlayer"
class="video-player vjs-custom-skin"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
/>
```
在上述代码中，playerOptions是一个对象，其中包含了播放器的配置信息，如播放速度、自动播放、静音、循环播放、预加载等。我们还需要配置播放源信息（sources），在不考虑m3u8格式时，可以配置mp4等格式的视频源。此外，我们还可以自定义控制条（controlBar）的显示和隐藏。
对于需要兼容m3u8格式的视频播放，vue-video-player默认并不支持。为了实现这一功能，我们需要使用video.js库的插件videojs-contrib-hls。在项目中安装videojs-contrib-hls：
```bash
npm install --save videojs-contrib-hls
```
引入videojs-contrib-hls的方式有两种，一种是在页面中直接引入：
```javascript
import 'videojs-contrib-hls'
Vue.use(hls)
```
另一种是在main.js文件中直接引入并注册：
```javascript
const hls = require('videojs-contrib-hls')
Vue.use(hls)
```
在配置playerOptions时，为支持m3u8格式，我们可以配置hls属性为true，并且配置对应的播放源信息，其中type为'application/x-mpegURL'，src为m3u8格式视频的URL。
挂载视频组件（非必须）后，我们可以通过计算属性（computed）来访问视频播放器实例：
```javascript
computed: {
player() {
return this.$refs.videoPlayer.player
}
}
```
通过player方法，我们可以在Vue实例中自定义播放、暂停等操作。
文章还提到了官方文档，其中video.js提供了非常丰富的API，可以让我们深入定制视频播放器的各种行为和样式。而vue-video-player的官方文档则提供了与Vue集成的具体使用示例和指南。
文章提到了如果在引入videojs-contrib-hls时遇到找不到文件的问题，可以通过在main.js中直接require的方式来解决。这是因为在某些项目配置中，可能直接引入的方式更适合模块的加载和解析。
vue-video-player为Vue.js项目提供了一种简洁且强大的方式来集成视频播放功能，特别通过引入videojs-contrib-hls插件，使其支持m3u8格式的视频播放，进一步增强了该插件的适用性。开发者只需要按照本文提供的示例代码和配置，就可以轻松地在自己的Vue项目中实现高质量的视频播放功能。
