在vue项目中使用vue-video-player播放m3u8视频文件

1.简介

Vue Video Player 是一个基于Vue.js 的视频播放器库，官方API Video.js API docs

m3u8是UTF-8编码格式。M3U8是指UTF-8编码的M3U文件，而M3U文件是记录了一个索引纯文本文件，打开它时播放软件并不是播放它，而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。M3U8是一种常见的流媒体格式，主要以文件列表的形式存在，既支持直播又支持点播，尤其在Android、iOS等平台最为常用。

2.vue-video-player的安装

注意事项：

• 记住下载这两个包就够了，千万不要下载video.js，因为vue-video-player会自动下载video.js，不然会冲突
• videojs-contrib-hls该组件是要兼容m3u8格式视频才需要的，若是一般的mp4文件，则不需要
• 需要注意的是如果你使用的是vue2，这里安装时要使用5以下的版本，目前最新的6.0.0版本只支持vue3.
• 我这里老项目，所以本文以vue2为例

npm install [email protected] -save
npm install [email protected] -save 

 3.vue-video-player的使用

1.引入

在main.js文件里，引入vue-video-player的插件

import Vue from 'vue'

import VideoPlayer from 'vue-video-player'

//引入样式

import 'vue-video-player/src/custom-theme.css'

import 'video.js/dist/video-js.css'

import 'videojs-contrib-hls'

//使用组件

Vue.use(VideoPlayer)

2.简单使用

 在页面中，使用vue-video-player提供的组件来播放视频

调用的时候使用这个对象操作，通过this.$refs.videoPlayer.player来设置属性和方法

this.$refs.videoPlayer.player

注意事项：

• Vue Video Player 使用了 Video.js 库来实现视频播放，所以在使用前需要先引入 Video.js 的样式文件,video-player标签的class必须设置成“video-player vjs-custom-skin”，你引入的样式才能起作用。
• Vue Video Player 默认使用了自定义主题样式，如果需要自定义样式，可以通过引入自定义的 CSS 文件来替换默认样式。
• 可以通过修改 playerOptions 对象来配置播放器的行为，例如设置自动播放、是否显示控制栏等。
• 可以通过 this.$refs.videoPlayer 来访问 videoPlayer 组件实例，并调用其提供的方法，例如播放、暂停等。
• 支持添加多个 元素来支持不同格式的视频文件。
   

3.options常用属性

• autoplay:是否自动播放，默认为false
• controls:是否显示控制条（播放/暂停等），默认为true
• muted:是否静音播放，默认false
• loop:是否循环播放，默认false
• playbackRats：定义课播放的速率，可以传入一个数组

• poster:设置视频封面，图片地址
• language：设置控件的语言；默认为’en’，可选值有’en’、'zh-CN’等。
• sources：定义视频源，可以传入一个数组，每个元素包含一个源地址和类型（例如mp4或webm）；默认为空。

• aspectRatio：设置播放器的宽高比，可以传入一个字符串（形如’16:9’）或一个小数（宽度除以高度的比例）；默认为空。

4.常用事件

• ready：视频播放器准备好时触发。可以在该事件中执行一些初始化的操作，比如设置视频源、设置音量等。

methods: {
  handleReady(player) {
    player.src = 'http://example.com/video.mp4';
    player.volume = 0.5;
  }
}

• start：视频开始播放时触发。可以在该事件中执行一些开始播放相关的操作，比如显示播放按钮、隐藏封面图等。
• play：视频播放时触发。可以在该事件中执行一些播放相关的操作，比如显示暂停按钮、更新播放进度等。
• pause：视频暂停时触发。可以在该事件中执行一些暂停相关的操作，比如显示播放按钮、暂停播放进度等。
• ended：视频播放结束时触发。可以在该事件中执行一些播放结束相关的操作，比如显示重新播放按钮、跳转到下一个视频等。
• error：视频出错时触发。可以在该事件中处理错误，比如显示错误提示、重新加载视频等。
• timeupdate：视频播放时间更新时触发。可以在该事件中更新播放进度、展示视频当前时间等。
• volumechange：视频音量变化时触发。可以在该事件中更新音量状态、展示当前音量等。
• play：当音频/视频已开始或不再暂停时触发。
• playing：当音频/视频在因缓冲而暂停或停止后已就绪时触发。
• progress：当浏览器正在下载音频/视频时触发。
• ratechange：当音频/视频的播放速度已更改时触发。
• seeked：当用户已移动/跳跃到音频/视频中的新位置时触发。
• seeking：当用户开始移动/跳跃到音频/视频中的新位置时触发。
• stalled：当浏览器尝试获取媒体数据，但数据不可用时触发。
• suspend：当浏览器刻意不获取媒体数据时触发。
• timeupdate：当目前的播放位置已更改时触发。
• volumechange：当音量已更改时触发。

• waiting：当视频由于需要缓冲下一帧而停止时触发

5.常用方法

• addTextTrack()：向音频/视频添加新的文本轨道。
• canPlayType()：检测浏览器是否能播放指定的音频/视频类型。
• load()：重新加载音频/视频元素。
• play()：开始播放音频/视频。
• pause()：暂停当前播放的音频/视频。

this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暂停
this.$refs.videoPlayer.player.src(src) // 重置进度条复制代码

6.一些回调函数demo