視頻才用流媒體，有后臺實時返回數據， 要支持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路徑,已檢測數據獲取是否成功
總結
以上所述是小編給大家介紹的vue + typescript + video.js實現 流媒體播放 視頻監控功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
