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