flvjs-播放视频、实时视频

我们在项目中经常遇到需要前端拿到一个视频源，播放视频，这个视频有可能是实时的或者是一个视频文件，这时仅凭H5的video标签是很难做到的，或者说播放不是不流畅的，通过多个js库比较，我发现flvjs功能还是比较全的，性能也不错，话不多说，直接上代码，代码组件是vue2.0：

<template>
  <video class="video-element" :disablePictureInPicture="true" controls autoplay muted :style="styles" ref="videoElement"></video>
</template>

<script>
/**
 * disablePictureInPicture
 * 去掉画中画
 * source:
 * flv视频地址，可以是文件地址或者http链接
  */
import flvjs from 'flv.js';
export default {
  name: 'FlvVideo',
  props: ['source', 'styles'],
  data() {
    return {
      flvPlayer: null,
      timer: null
    };
  },
  watch: {
    source() {
      this.initVideo();
    }
  },
  mounted() {
    this.initVideo();
  },
  beforeDestroy() {
    this.destroyELe();
  },
  methods: {
    initVideo() {
      if (flvjs.isSupported() && this.source) {
        const videoElement = this.$refs.videoElement;
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',  // 这里类型可用是多种比如：mp4，url直接用mp4链接即可
          isLive: true,
          hasAudio: false,
          url: this.source
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();

        flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
          console.log(errorType);
          console.log(errorInfo);
          console.log('视频错误信息回调');
          if (this.timer) {
            clearTimeout(this.timer);
          }
          this.timer = setTimeout(() => {
            this.$emit('videoError', false);
          }, 500);
        });

        // 【重要事件监听】http请求建立好后，该事件会一直监听flvjs实例
        // flvPlayer.on(flvjs.Events.STATISTICS_INFO, (a) => {
        // });

        videoElement.addEventListener('ended', () => {
          this.$emit('videoEnd', 'end');
        });

        this.flvPlayer = flvPlayer;
      } else {
        this.destroyELe();
      }
    },
    destroyELe() {
      if (this.flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.video-element {
  width: 100%;
  height: 350px;
}
.video-element-tip {
  width: 260px;
  line-height: 150px;
  text-align: center;
  font-size: 16px;
  color: #fff;
}
/*全屏按钮*/
video::-webkit-media-controls-fullscreen-button {
  display: block;
}

/*进度条*/
video::-webkit-media-controls-timeline {
  display: none;
}

/*观看的当前时间*/
video::-webkit-media-controls-current-time-display {
  display: none;
}

/*剩余时间*/
video::-webkit-media-controls-time-remaining-display {
  display: none;
}

/*音量按钮*/
video::-webkit-media-controls-mute-button {
  display: none;
}

video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}

/*音量的控制条*/
video::-webkit-media-controls-volume-slider {
  display: none;
}
</style>

组件直接可用，直接复制粘贴即可，附赠video样式控制，是不是很贴心。