vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能
視頻才用流媒體,有后臺(tái)實(shí)時(shí)返回?cái)?shù)據(jù), 要支持flash播放, 所以需安裝對(duì)應(yīng)的flash插件。當(dāng)視頻播放時(shí),每間隔3秒向后臺(tái)發(fā)送請(qǐng)求供檢測(cè)心跳,表明在線收看狀態(tài),需要后臺(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)建后,向后臺(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)視,可使用此地址測(cè)試 }], autoplay: true, controls: true, width: '778', height: '638', }; <video-player :options="videoOptions" v-if="videoOptions.sources[0].src !== ''"></video-player>
5. 心跳檢測(cè)
在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路徑,已檢測(cè)數(shù)據(jù)獲取是否成功
總結(jié)
以上所述是小編給大家介紹的vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
- vue播放flv、m3u8視頻流(監(jiān)控)的方法實(shí)例
- 使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)
- vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼
- vue+flv.js+SpringBoot+websocket實(shí)現(xiàn)視頻監(jiān)控與回放功能
- vue-video-player實(shí)現(xiàn)實(shí)時(shí)視頻播放方式(監(jiān)控設(shè)備-rtmp流)
- Vue 3集成海康Web插件實(shí)現(xiàn)視頻監(jiān)控功能
相關(guān)文章
vue如何使用element ui表格el-table-column在里面做判斷
這篇文章主要介紹了vue如何使用element ui表格el-table-column在里面做判斷問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件,子組件使用 $emit 觸發(fā)父組件的自定義事件,今天通過(guò)示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用,感興趣的朋友一起看看吧2022-03-03Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題的解決辦法,文中通過(guò)圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07Vue兩個(gè)通信方式與動(dòng)畫過(guò)度及混入使用介紹
最近在寫vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過(guò)渡的效果,雖然vue動(dòng)畫不是強(qiáng)項(xiàng),庫(kù)也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下2023-03-03vue 項(xiàng)目打包時(shí)樣式及背景圖片路徑找不到的解決方式
今天小編就為大家分享一篇vue 項(xiàng)目打包時(shí)樣式及背景圖片路徑找不到的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作
這篇文章主要介紹了vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07