如何在vue工程中使用flvJS

在vue工程中使用flvJS demo

<video ref="videoElement"></video>

import flvjs from 'flv.js/dist/flv.min.js'
export default {
  props: {
    url: { type: String, default: '' },
    type: { type: String, default: 'flv' },
    isAutoPlay:{ type: Boolean, default: false },
    height: { type: Number, default: 360 },
    width: { type: Number, default: 100 },
    poster: {type:String,default:"/image/index/logo.png"},
  },
  data() {
    return {
      flvPlayer: null
    }
  },
  destroyed() {
    this.destroyPlayer()
  },
  methods: {
    play() {
      if (this.url && flvjs.isSupported()) {
        if (this.flvPlayer) {
          this.destroyPlayer()
        }

        let videoElement = this.$refs.videoElement // document.getElementById("videoElement");
        this.flvPlayer = flvjs.createPlayer(
          {
            type: this.type,
            enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
            isLive: true, //直播模式
            hasAudio: false, //开启音频
            hasVideo: true,
            stashInitialSize: 128, //128
            enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
            url: this.url,
            lazyLoad:false,
           // lazyLoadMaxDuration:2,
            reuseRedirectedURL:true,
          //  deferLoadAfterSourceOpen:true,
           // rangeLoadZeroStart:true
            //url: 'http://172.16.26.70:8082/live?srv=1&app=live&stream=cctv1',
            //url:'http://player.alicdn.com/video/aliyunmedia.mp4',
          }
        )
       
        flvjs.LoggingControl.enableInfo=false;
        flvjs.LoggingControl.enableWar=false;
        flvjs.LoggingControl.enableError=false;
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load() 
        this.flvPlayer.play()
        var $this=this;
        //flv暂停监听
        videoElement.addEventListener('pause', function () { //暂停开始执行的函数
          let isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
          if (!isFullScreen) {
              console.log("暂停开始执行函数")
              $this.destroyPlayer()
          }
       });
        this.flvPlayer.on('error', err => {
          Toast.fail("播放失败！")
        //  console.log('err', err);
          $this.destroyPlayer()
        });
      }
    },//只允许播放一个video
    onlyPlayOne() {
      var video = document.getElementsByTagName('video')
      // 暂停函数
      function pauseAll() {
        var self = this
        ;[].forEach.call(video, function (i) {
          // 将audios中其他的audio全部暂停
          i !== self && i.pause()
        })
      }
      // 给play事件绑定暂停函数
      ;[].forEach.call(video, function (i) {
        i.addEventListener('play', pauseAll.bind(i))
      })
    },
    //销毁flv player
    destroyPlayer() {
      if (this.flvPlayer) {
        try{
            this.flvPlayer.pause()
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy(true)
            this.flvPlayer = null
        }catch(e){
          //TODO handle the exception
        }
      }
     
    } ,
     //监听全屏
    listenFullScreen() {
      ;['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange'].forEach((item, index) => {
        window.addEventListener(item, function () {
          let isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
          if (isFullScreen) {
            //  进入全屏
            if (window.plus) {
              plus.screen.lockOrientation('landscape-primary') //横屏
            }
          } else {
            //  退出全屏
            if (window.plus) {
              plus.screen.lockOrientation('portrait-primary') //竖屏
            }
          }
        })
      })
    },
  }
}
</script>