vue + typescript + video.js 流媒體播放 視頻監控

視頻才用流媒體，有後臺實時返回數據， 要支持flash播放， 因此需安裝對應的flash插件。當視頻播放時，每間隔3秒向後臺發送請求供檢測心跳，代表在線收看狀態,須要後臺持續發送視頻數據。

1. yarn add video.js videojs-flash

2. 建立videp.js聲明文件

3. 建立video_player.vue組件，供外部調用。源碼以下

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator';

import 'video.js/dist/video-js.css';

import _videojs from 'video.js';
const videojs = (window as any).videojs || _videojs;
import 'videojs-flash';


@Component({
  name: 'video-player',
})
export default class VideoPlayer extends Vue {
  /* ------------------------ INPUT & OUTPUT ------------------------ */
  @Prop({ type: Object, default: () => {}}) private options!: object;

  /* ------------------------ VUEX (vuex getter & vuex action) ------------------------ */

  /* ------------------------ LIFECYCLE HOOKS (created & mounted & ...) ------------------------ */
  private mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      // console.log('onPlayerReady');
    });
  }

  private beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
  /* ------------------------ COMPONENT STATE (data & computed & model) ------------------------ */
  private player: any;

  /* ------------------------ WATCH ------------------------ */

  /* ------------------------ METHODS ------------------------ */
}

</script>

<template>
<div class="module_video_player">
  <video ref="videoPlayer" class="video-js" autoplay></video>
</div>
</template>

<style lang="stylus" scoped>
@import '~@/assets/styles/var.styl';

.module_video_player
  position relative
  width 780px

</style>

4. 在須要使用的模塊（如show_monitor.vue）調用。組件建立後，向後臺發送輕輕獲取rtmp視頻播放地址，並更新videoOptions中的src。觸發video_player的建立、掛載等。

import VideoPlayer from '@/components/video_player.vue';

components: {
  VideoPlayer,
}

  private videoOptions = {
    techOrder: ['flash', 'html5'],
    sourceOrder: true,
    flash: {
      hls: { withCredentials: false },
    },
    html5: { hls: { withCredentials: false } },
    sources: [{
      type: 'rtmp/flv',
      src: '', // 'rtmp://live.hkstv.hk.lxdns.com/live/hks2', // 香港衛視，可以使用此地址測試
    }],
    autoplay: true,
    controls: true,
    width: '778',
    height: '638',
  };

<video-player :options="videoOptions" v-if="videoOptions.sources[0].src !== ''"></video-player>

5. 心跳檢測

在show_monitor.vue建立時，新建定時器，每隔3秒向後臺發送一個包含當前監控設備id的請求，告知後臺此設備監控被調用播放。show_monitor.vue銷燬時，清空定時器，後臺將中止傳輸視頻數據。

private intervalFunc: any;

private created() {
 // ****
 this.intervalFunc = setInterval(() => {
    EquipmentService.monitor_continue_test(this.eqmtid);
  }, 3000);
}

private destroyed() {
  clearInterval(this.intervalFunc);
}

注： 能夠再電腦安裝VLC media player 下載， 播放獲取到的rtmp路徑,已檢測數據獲取是否成功