欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年07月07日 14:30:56   作者:element  
視頻才用流媒體,有后臺實(shí)時返回?cái)?shù)據(jù), 要支持flash播放, 所以需安裝對應(yīng)的flash插件。這篇文章主要介紹了vue + typescript + video.js 流媒體播放 視頻監(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在里面做判斷

    這篇文章主要介紹了vue如何使用element ui表格el-table-column在里面做判斷問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • vue實(shí)現(xiàn)flv格式視頻播放效果

    vue實(shí)現(xiàn)flv格式視頻播放效果

    這篇文章主要介紹了vue實(shí)現(xiàn)flv格式視頻播放,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07
  • vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)

    vue項(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-03
  • Vue?關(guān)于$emit與props的使用示例代碼

    Vue?關(guān)于$emit與props的使用示例代碼

    父組件使用 props 把數(shù)據(jù)傳給子組件,子組件使用 $emit 觸發(fā)父組件的自定義事件,今天通過示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用,感興趣的朋友一起看看吧
    2022-03-03
  • vue使用mpegts.js的詳細(xì)步驟記錄

    vue使用mpegts.js的詳細(xì)步驟記錄

    MPEGTS.js是一個輕量級的JavaScript庫,用于處理MPEG-TS流,這篇文章主要給大家介紹了關(guān)于vue使用mpegts.js的詳細(xì)步驟記錄,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-04-04
  • Vue對Element中el-tab-pane添加@click事件無效問題解決

    Vue對Element中el-tab-pane添加@click事件無效問題解決

    這篇文章主要給大家介紹了關(guān)于Vue對Element中el-tab-pane添加@click事件無效問題的解決辦法,文中通過圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • Vue兩個通信方式與動畫過度及混入使用介紹

    Vue兩個通信方式與動畫過度及混入使用介紹

    最近在寫vue的一個項(xiàng)目要實(shí)現(xiàn)過渡的效果,雖然vue動畫不是強(qiáng)項(xiàng),庫也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過渡動畫效果的相關(guān)資料,需要的朋友可以參考下
    2023-03-03
  • Vue中子組件的顯示與隱藏方式

    Vue中子組件的顯示與隱藏方式

    這篇文章主要介紹了Vue中子組件的顯示與隱藏方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue 項(xiàng)目打包時樣式及背景圖片路徑找不到的解決方式

    vue 項(xiàng)目打包時樣式及背景圖片路徑找不到的解決方式

    今天小編就為大家分享一篇vue 項(xiàng)目打包時樣式及背景圖片路徑找不到的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作

    vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作

    這篇文章主要介紹了vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07

最新評論