vue + typescript + video.js實(shí)現(xiàn) 流媒體播放視頻監(jiān)控功能

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:54:10

vue + typescript + video.js實(shí)現(xiàn) 流媒體播放視頻監(jiān)控功能

vue + typescript + video.js實(shí)現(xiàn) 流媒體播放視頻監(jiān)控功能:視頻才用流媒體，有后臺實(shí)時(shí)返回?cái)?shù)據(jù)，要支持flash播放，所以需安裝對應(yīng)的flash插件。當(dāng)視頻播放時(shí)，每間隔3秒向后臺發(fā)送請求供檢測心跳，表明在線收看狀態(tài),需要后臺持續(xù)發(fā)送視頻數(shù)據(jù)。 1. yarn add video.js videojs-flash 2. 創(chuàng)建vide

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue + typescript + video.js實(shí)現(xiàn) 流媒體播放視頻監(jiān)控功能:視頻才用流媒體，有后臺實(shí)時(shí)返回?cái)?shù)據(jù)，要支持flash播放，所以需安裝對應(yīng)的flash插件。當(dāng)視頻播放時(shí)，每間隔3秒向后臺發(fā)送請求供檢測心跳，表明在線收看狀態(tài),需要后臺持續(xù)發(fā)送視頻數(shù)據(jù)。 1. yarn add video.js videojs-flash 2. 創(chuàng)建vide

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

1. yarn add video.js videojs-flash

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

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

<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）調(diào)用。組件創(chuàng)建后，向后臺發(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',
 };
<video-player :options="videoOptions" v-if="videoOptions.sources[0].src !== ''"></video-player>

5. 心跳檢測

在show_monitor.vue創(chuàng)建時(shí)，新建定時(shí)器，每隔3秒向后臺發(fā)送一個(gè)包含當(dāng)前監(jiān)控設(shè)備id的請求，告知后臺此設(shè)備監(jiān)控被調(diào)用播放。show_monitor.vue銷毀時(shí)，清空定時(shí)器，后臺將停止傳輸視頻數(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)控功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com