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

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

1.纱线添加视频。射流研究…视频js-flash

2.创建videp.js声明文件

3.创建视频播放器。某视频剪辑软件组件，供外部调用。源码如下

脚本lang='ts '从“vue-房产装饰商”导入{组件、发射、道具、Vue }；进口'video.js/dist/video-js.css'；从" video.js "导入_ videojsconst videojs=(任意窗口)。videojs | | _ videojs导入“videojs-flash”；@组件({ name : '视频播放器'，})导出默认类放像机扩展了vue {/*-INPUT OUTPUT-*/@ Prop({ type : Object，default: ()={})私有选项！对象；/*-VUEX(VUEX getter VUEX action)-*//*-生命周期HOOKS(已创建并挂载.)-*/私有挂载(){ this。player=videojs(这个.$refs.videoPlayer，this.options，function onPlayerready(){//console。日志(' OnPlayerready ')；});} private BeforeDestrol(){ if(this。玩家){这个。玩家。dispose()；} } /* - COMPONENT STATE(数据计算模型)-*/私人播放器：任何；/*-WATCH-*////*-method-*/}/脚本模板div class=' module _ video _ player ' video ref=' video player ' class=' video-js '自动播放/video/div/模板样式lang='手写笔'作用域@ import '[email protected]/assets/styl/var。styl '；模块_视频_播放器位置相对宽度780px/style4 .在需要使用的模块（如show_monitor.vue)调用。组件创建后，向后台发送轻轻获取实时消息传送协议视频播放地址，并更新视频选项中的src。触发视频播放器的创建、挂载等。

从" @/components/video_player.vue "导入video player components 3360 { video player，}私人视频选项={ techorder :[' flash '，' html5']，sourceOrder: true，flash : { HLS : { withdradentials : false }，}，html 53: { HLS 3: { withdradentials 33: false } }，source 333:[{ type 3333: ' rtmp/flmp香港卫视，可使用此地址测试}]，autoplay: true，controls: true，width: '778 '，height: '638 '，}；视频播放器：选项='视频选项' v-if='视频选项。来源[0].src！==' ' '/视频播放器5。心跳检测

在显示监视器。某视频剪辑软件创建时，新建定时器，每隔3秒向后台发送一个包含当前监控设备编号的请求，告知后台此设备监控被调用播放显示监视器销毁时，清空定时器，后台将停止传输视频数据。

private interval func : any private创建了(){//* * * *此。interval func=setInterval(()={ equipment service。monitor _ continue _ test(这。eqm tid)；}, 3000);} private explored(){ clearInterval(this。区间函数)；}注：可以再电脑安装可见光通讯媒体播放器下载，播放获取到的实时消息传送协议路径，已检测数据获取是否成功

总结

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