視頻才用流媒體，有后臺(tái)實(shí)時(shí)返回?cái)?shù)據(jù)， 要支持flash播放， 所以需安裝對(duì)應(yīng)的flash插件。當(dāng)視頻播放時(shí)，每間隔3秒向后臺(tái)發(fā)送請(qǐng)求供檢測心跳，表明在線收看狀態(tài),需要后臺(tái)持續(xù)發(fā)送視頻數(shù)據(jù)。

創(chuàng)新互聯(lián)是一家專業(yè)提供朝陽縣企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、html5、小程序制作等業(yè)務(wù)。10年已為朝陽縣眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

1. yarn add video.js videojs-flash

2. 創(chuàng)建videp.js聲明文件 

3. 創(chuàng)建video_player.vue組件，供外部調(diào)用。源碼如下

4. 在需要使用的模塊（如show_monitor.vue）調(diào)用。組件創(chuàng)建后，向后臺(tái)發(fā)送輕輕獲取rtmp視頻播放地址，并更新videoOptions中的src。觸發(fā)video_player的創(chuàng)建、掛載等。

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', // 香港衛(wèi)視，可使用此地址測試
  }],
  autoplay: true,
  controls: true,
  width: '778',
  height: '638',
 };

5. 心跳檢測

在show_monitor.vue創(chuàng)建時(shí)，新建定時(shí)器，每隔3秒向后臺(tái)發(fā)送一個(gè)包含當(dāng)前監(jiān)控設(shè)備id的請(qǐng)求，告知后臺(tái)此設(shè)備監(jiān)控被調(diào)用播放。show_monitor.vue銷毀時(shí)，清空定時(shí)器，后臺(tái)將停止傳輸視頻數(shù)據(jù)。

private intervalFunc: any;

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

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

注： 可以再電腦安裝VLC media player下載 ， 播放獲取到的rtmp路徑,已檢測數(shù)據(jù)獲取是否成功

總結(jié)

以上所述是小編給大家介紹的vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！