flv.js Vue组件

flv.js是bilibili网站开源的使用纯JavaScript而不使用Flash编写的HTML5 Flash视频（FLV）播放器。

组件中使用

<template>
  <div id="videoPage">
  	<!-- 通过 v-if 会移出 DOM 实现刷新部分组件 -->
	<div v-if="loading">
	  <flv-video :item="item"></flv-video>
	</div>
  </div>
</template>

<script>
import flvVideo from "./flvVideo"
export default {
  name: 'videoPage',
  data () {
    return {
	  item: {
	    camera_id: 'id',
	    flv_address: 'video_url'
	  },
	  loading: true,
	}
  },
  components: {
	flvVideo
  },
}
</script>

引用

npm install flv.js

单独的组件部分

<template>
  <div id="flvVideo">
    <video :id="this.videoData.camera_id"
           :style="'width: 100%; height:300px'"
           controls
           autoplay
           muted></video>
  </div>
</template>

<script>
//=> 引入flv.js
import flvjs from "flv.js";
export default {
  name: 'flvVideo',
  data () {
    return {
      videoData: {},
    }
  },
  props: {
    item: {
      type: Object,
      default: {}
    },
  },
  watch: {
    item: {
      // 每个属性值发生变化就会调用这个函数
      handler (newVal, oldVal) {
        this.videoData = newVal
        setTimeout(() => {
          this.startPlay()
        }, 1000)
      },
      // 立即处理 进入页面就触发
      immediate: true,
      // 深度监听 属性的变化
      deep: true
    }
  },
  methods: {
    //视频浏览
    startPlay () {
      if (flvjs.isSupported()) {
        let player = null;
        let videoElement = document.getElementById(this.videoData.camera_id);
        player = flvjs.createPlayer({
          type: "flv", //=> 媒体类型 flv 或 mp4
          isLive: true, //=> 是否为直播流
          hasAudio: false, //=> 是否开启声音
          url: this.videoData.flv_address, //=> 视频流地址
        });
        player.attachMediaElement(videoElement); //=> 绑DOM
        player.load();
        player.play();
      } else {
        console.log("flvjs不支持");
      }
    }
  },
}
</script>

<style>
</style>

参考

在vue和html中播放.flv格式的视频
vue + flv.js 实现多视频播放