vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能
視頻才用流媒體,有后臺實(shí)時返回?cái)?shù)據(jù), 要支持flash播放, 所以需安裝對應(yīng)的flash插件。當(dāng)視頻播放時,每間隔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)建時,新建定時器,每隔3秒向后臺發(fā)送一個包含當(dāng)前監(jiān)控設(shè)備id的請求,告知后臺此設(shè)備監(jiān)控被調(diào)用播放。show_monitor.vue銷毀時,清空定時器,后臺將停止傳輸視頻數(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)控功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
vue如何使用element ui表格el-table-column在里面做判斷
這篇文章主要介紹了vue如何使用element ui表格el-table-column在里面做判斷問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件,子組件使用 $emit 觸發(fā)父組件的自定義事件,今天通過示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用,感興趣的朋友一起看看吧2022-03-03Vue對Element中el-tab-pane添加@click事件無效問題解決
這篇文章主要給大家介紹了關(guān)于Vue對Element中el-tab-pane添加@click事件無效問題的解決辦法,文中通過圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07vue 項(xiàng)目打包時樣式及背景圖片路徑找不到的解決方式
今天小編就為大家分享一篇vue 項(xiàng)目打包時樣式及背景圖片路徑找不到的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作
這篇文章主要介紹了vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07