視頻才用流媒體,有後臺實時返回數據, 要支持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路徑,已檢測數據獲取是否成功