在vue项目中使用vue-video-player播放m3u8视频文件_vue 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: {
        // 播放回调 视频系列 start
        onPlayerPlay(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>