vue + typescript + video.js实现 流媒体播放 视频监控功能

视频才用流媒体，有后台实时返回数据， 要支持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路径,已检测数据获取是否成功

以上所述是小编给大家介绍的vue + typescript + video.js实现 流媒体播放 视频监控功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！