HTTP-FLV协议的视频播放

Web直播之HTTP-FLV协议：flv.js

视频直播服务目前支持3种直播协议：RTMP、HLS、HTTP-FLV。
本文主要讲解在 Vue 项目中如何使用 flvjs 播放器播放 flv 流。

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。

1.准备工作

cnpm install --save flv.js

2.代码实战

<template>
  <div id="app">
    <video id="videoElement"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  data() {
    return {
      flvPlayer: null
    }
  },
  methods: {
    /** * @description 新建flv实例 */
    createFlvPlayer() {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('videoElement')
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          url: 'flv视频拉流地址'
        })
        
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },

    /** * @description 停止混流播放并移除直播流抓取 * (注：离开并重新进入当前路由，观察Network，可知该操作的必要性) */
    pausemix() {
      this.flvPlayer.pause()
      this.flvPlayer.unload()
      this.flvPlayer.detachMediaElement()
      this.flvPlayer.destroy()
      this.flvPlayer = null
    }
  },
  mounted() {
    this.createFlvPlayer()
  },
  beforeDestroy() {
    this.pausemix()
  }
}
</script>

全屏按钮的实现（判断requestFullscreen）

fullScreen() {
    // this.flvPlayer.setFullScreen(true);
    var elem = document.getElementById('videoElement');
    if(elem.requestFullscreen) {
          elem.requestFullscreen();
    } else if(elem.mozRequestFullScreen) {
         elem.mozRequestFullScreen();
    } else if(elem.msRequestFullscreen){
        elem.msRequestFullscreen();
   } else if(elem.oRequestFullscreen){
       elem.oRequestFullscreen();
  }else if(elem.webkitRequestFullscreen){
      elem.webkitRequestFullScreen();
  }
}