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

前言

在本文中，我们将会详细讲解如何在Vue 2.0框架下通过vue-video-player插件来实现HLS流媒体的播放，并且将所有的实现细节都展示给读者。在接下来的过程中，我们将会使用两个示例来讲解这个过程。

安装

首先，我们需要将vue-video-player插件引入我们的Vue项目中，我们可以通过npm进行安装，命令如下：

npm install vue-video-player --save

引入

安装成功后，我们需要通过Vue.use()方法来确保插件在Vue实例中可以正常工作。具体引入方式如下：

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

示例1：最简单的HLS播放

我们将会从最简单的HLS播放开始，示例代码如下：

<template>
  <div>
    <video-player :options="playerOptions" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      playerOptions: {
        autoplay: true,
        sources: [{
          type: 'application/x-mpegURL',
          src: 'http://example.com/demo.m3u8'
        }]
      }
    }
  }
}
</script>

在上述代码中，我们首先通过Vue.use()方法引入了vue-video-player插件，之后在模板中定义了一个div容器，并在其中添加了一个video-player标签。在这个标签中，我们设置了一个options属性，并将自定义的参数传入其中：

autoplay: 是否自动播放。
sources: 定义了包含播放地址的源文件参数。

最后的src浏览器会根据type参数进行自动选择。

示例2：使用事件处理程序

在实际开发中，我们可能需要对某些事件进行处理。在vue-video-player插件中，我们可以通过绑定事件处理程序来实现这个功能。下面是一个事件处理程序的示例代码：

<template>
  <div>
    <video-player :options="playerOptions" @play="handlePlay" />
  </div>
</template>

<script>
export default {
  methods: {
    handlePlay () {
      console.log('播放已开始')
    }
  },
  data () {
    return {
      playerOptions: {
        sources: [{
          type: 'application/x-mpegURL',
          src: 'http://example.com/demo.m3u8'
        }]
      }
    }
  }
}
</script>

在上述代码中，我们首先创建了一个事件处理程序句柄handlePlay，这个句柄会在播放开始后被调用，同时它会向控制台输出一条日志信息。在模板中，我们使用@play事件绑定了handlePlay句柄。