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

前端  /  管理员 发布于 5年前   957

视频才用流媒体，有后台实时返回数据， 要支持flash播放， 所以需安装对应的flash插件。当视频播放时，每间隔3秒向后台发送请求供检测心跳，表明在线收看状态,需要后台持续发送视频数据。

1. yarn add video.js videojs-flash

2. 创建videp.js声明文件 

 

3. 创建video_player.vue组件，供外部调用。源码如下

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', };

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实现 流媒体播放 视频监控功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

• Vue结合Video.js播放m3u8视频流的方法示例
• vue使用video.js进行视频播放功能
• vue通过video.js解决m3u8视频播放格式的方法