vue-video-play使用方法

vue-video-play使用方法

最近项目中有需求要求查看监控，并且需要在请求视频的时候，带上特定的请求头，这样原生的video标签就无法满足需求，只好在网上开始寻找解决方案。最后目光落在了vue-video-play上。

首先安装 vue-video-player
我这边是m3u8的视频，所以还要安装videojs-contrib-hls

npm install vue-video-player --save
npm install videojs-contrib-hls --save 

安装完成之后，在main.js中引入注册
main.js

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
const hls = require('videojs-contrib-hls')	//我这里import不成功，所以只能使用这种方式
Vue.use(hls)
Vue.use(VideoPlayer)

然后就可以在项目中直接使用<video-paly>标签了
这是tempalte中的使用方法，其实不用写这么多方法，我这是从网上找的，应该比较全，各种情况下的事件都可以自己配置

<template>
  <div class="content-box">
    <video-player
      class="video-player"
      :playsinline="playsinline"
      :options="playerOptions"
      :headers="headers"
      @click.stop
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      @ready="playerReadied"
      @statechanged="playerStateChanged($event)"
    />
  </div>
</template>

这是js代码

export default {
  data() {
    return {
      playsinline: true,
      //配置请求的headers
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json;charset=UTF-8',
        'Accept-Language': 'zh-CN,zh;q=0.9,hy;q=0.8,mn;q=0.7',
        'Authorization': 'Bearer ' + 'tokentokentokentokentokentokentokentoken'
      },
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            withCredentials: true,
            type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: '' // url地址
          }
        ],
        flash: { hls: { withCredentials: false }},
        html5: { hls: { withCredentials: false }},
        hls: true,
        poster: '', // 你的封面地址
        width: document.documentElement.clientWidth, // 播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  created() {
    const token = 'token'
    //这里可以配置视频地址
    this.playerOptions.sources[0].src = '/hls/cctv3hd.m3u8'
  },
  methods: {
    // 事件监听
    onPlayerPlay(player) {
      console.log('player play!', player)
    },
    onPlayerPause(player) {
      console.log('player pause!', player)
    },
    onPlayerEnded(player) {
      console.log('player ended!', player)
    },
    onPlayerLoadeddata(player) {
      console.log('player Loadeddata!', player)
    },
    onPlayerWaiting(player) {
      console.log('player Waiting!', player)
    },
    onPlayerPlaying(player) {
      console.log('player Playing!', player)
    },
    onPlayerTimeupdate(player) {
      console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay(player) {
      console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough(player) {
      console.log('player Canplaythrough!', player)
    },
    playerStateChanged(playerCurrentState) {
      console.log(playerCurrentState)
    },
    // 播放器准备好之后
    playerReadied(player) {
      const _this = this
      console.log(player)
      // 这块没太看懂，可以去查一下文档，我反正照着写的
      var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
      console.log(hls)
      player.tech_.hls.xhr.beforeRequest = function(options) {
        console.log(options)
        const userInfo = localStorage.getItem('userInfo')
        const token = 'token'
        options.headers = {
          'Accept': 'application/json, text/plain, */*',
          'Content-Type': 'application/json;charset=UTF-8',
          'Accept-Language': 'zh-CN,zh;q=0.9,hy;q=0.8,mn;q=0.7',
          'Authorization': 'Bearer ' + token
        }
        return options
      }
    },
    close() {
      this.$emit('close')
    }
  }
}

这样的话，基本上播放m3u8的视频问题不大了，不过还有很多地方有点疑问，需要查文档，在此做个记录