在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 vue-video-player@5.0.1 -save
npm install videojs-contrib-hls@5.15.0 -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提供的<video-player>组件来播放视频

<template><div><video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"></video-player></div>
</template><script>
export default {data() {return {playerOptions: {//视频url设置,直播流为例sources: [{src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',//视频文件地址type: 'application/x-mpegURL'//视频类型，这里可以不写，如果写一定要写对，否则会无法播放}],// 其他设置项notSupportedMessage: "此视频暂无法播放，请稍后再试",//提示信息autoplay: true,//是否自动播放controls: true,是否显示控制栏poster: 'http://path/to/poster.jpg',//视频封面}}},mounted() {// 通过 ref 访问 videoPlayer 组件实例，播放this.$refs.videoPlayer.play()}
}
</script>

调用的时候使用这个对象操作，通过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 组件实例，并调用其提供的方法，例如播放、暂停等。
支持添加多个 <source> 元素来支持不同格式的视频文件。

3.options常用属性

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

<vue-video-player 
:options="{ playbackRates: [0.5, 1, 1.5, 2] }">
</vue-video-player>

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

<vue-video-player 
:options="{ sources: [{ src: 'path/to/video.mp4', type: 'video/mp4' }] }">
</vue-video-player>

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

4.常用事件

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

<video-player @ready="handleReady"></video-player>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

  <template><div class='demo'><video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"@play="onPlayerPlay($event)" @pause="onPlayerPause($event)"@ended="onPlayerEnded($event)"@waiting="onPlayerWaiting($event)"@playing="onPlayerPlaying($event)"@loadeddata="onPlayerLoadeddata($event)"@timeupdate="onPlayerTimeupdate($event)"@canplay="onPlayerCanplay($event)"@canplaythrough="onPlayerCanplaythrough($event)"@statechanged="playerStateChanged($event)"@ready="playerReadied"></video-player></div></template><script>export default {methods: {// 播放回调 视频系列 startonPlayerPlay(player) {console.log("player play!", player);},// 暂停回调onPlayerPause(player) {console.log("player pause!", player);},// 视频播完回调onPlayerEnded($event) {console.log(`player`, $event);},// DOM元素上的readyState更改导致播放停止onPlayerWaiting($event) {console.log(`player`, $event);},// 已开始播放回调onPlayerPlaying($event) {console.log(`player`, $event);},// 当播放器在当前播放位置下载数据时触发onPlayerLoadeddata($event) {console.log(`player`, $event);},// 当前播放位置发生变化时触发。onPlayerTimeupdate($event) {console.log(`player`, $event);},//媒体的readyState为HAVE_FUTURE_DATA或更高onPlayerCanplay(player) {console.log("player Canplay!", player);},//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。onPlayerCanplaythrough(player) {console.log("player Canplaythrough!", player);},//播放状态改变回调playerStateChanged(playerCurrentState) {//   console.log('player current update state', playerCurrentState);if (playerCurrentState.timeupdate > 3 * 60 && this.freeBl) {this.$refs.videoPlayer.player.pause();this.free = this.freeBl;}},//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。playerReadied(player) {console.log("example player 1 readied", player);},// 视频 end}}</script>