vue前端采用videojs模块,实现rtmp视频流播放

node安装videojs和videojs-flash模块

npm install video.js  videojs-flash

vue引入模块和样式

<template>
<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src=" "  type="rtmp/mp4"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>
</template>

<script>
import videojs from 'video.js';
import "videojs-flash"
import "video.js/dist/video-js.min.css"
export default {
  name: "VideoPlay",
  }
</script>

参考
https://github.com/videojs

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue是一种流行的JavaScript框架,通常用于开发现代Web应用程序。它使用MVVM(Model-View-ViewModel)模式,并提供响应式数据绑定和模板语法。Vue可以与其他库和框架配合使用,以实现功能丰富,交互性好的Web应用程序。 实现实时视频播放方式,需要使用Vue与其他库和框架集成。具体来说,可以使用Video.js(一个开源的HTML5视频播放器),以及RTMP.js(JavaScript实现RTMP流媒体协议库)。 以下是实现实时视频播放方式(监控设备-RTMP流)的步骤: 1.在Vue应用程序中引入video.jsrtmp.js依赖库,例如: ```javascript import videojs from 'video.js' import 'video.js/dist/video-js.css' import '../node_modules/@silvermine/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.js' import '../node_modules/@silvermine/videojs-quality-selector/dist/videojs-quality-selector.js' import RtmpStream from 'rtmp-stream'; ``` 2.使用Vue组件定义页面的结构和样式,为视频播放器添加HTML元素,例如: ```html <template> <div class="player"> <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay width="960" height="540" > <source :src="videoUrl" type="rtmp/mp4" /> </video> </div> </template> <style> .player { height: 540px; width: 960px; } </style> ``` 3.在Vue组件定义中使用video.js初始化视频播放器和设置相关参数,例如: ```javascript export default { data() { return { videoUrl: '', player: null, }; }, mounted() { this.initializePlayer(); }, methods: { initializePlayer() { this.player = videojs('my-video', { liveui: true, preload: 'auto', sources: [ { src: '', type: 'rtmp/mp4', }, ], controlBar: { volumePanel: { inline: false, vertical: true, }, }, }); this.player.qualityLevels(); this.player.src(this.getRtmpUrl('streamUrl')); this.player.play(); }, getRtmpUrl(streamUrl) { return RtmpStream({ url: 'rtmp://domain/liveapp', stream: streamUrl, }); }, }, } ``` 以上就是利用Vue实现实时视频播放方式(监控设备-RTMP流)的主要步骤和相关代码。通过以上方式,我们可以轻松实现监控设备实时视频播放,以便更好地进行视频监控和安全管理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值