vue + typescript + video.js实现 流媒体播放 视频监控功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue + typescript + video.js实现 流媒体播放 视频监控功能,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2904字,纯文字阅读大概需要5分钟。
内容图文
视频才用流媒体,有后台实时返回数据, 要支持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实现 流媒体播放 视频监控功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
内容总结
以上是互联网集市为您收集整理的vue + typescript + video.js实现 流媒体播放 视频监控功能全部内容,希望文章能够帮你解决vue + typescript + video.js实现 流媒体播放 视频监控功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。