video.js播放rtmp视频

最近公司要求拉取某公司流媒体服务器的视频监控，并在web端页面播放，流媒体服务器发送的是rtmp格式视频流，经过网上查资料，最后敲定使用video.js

rtmp流需要依托flash播放，现在大多浏览器已经禁止使用flash,所以非必要不使用。

回顾我一个大后端在video.js道路上的心酸史，泪流满面！！！网上资料千篇一律，贼鸡巴坑。我也并不是很懂，现在把自己成功后的代码分享一下，希望能帮助哪怕一个人。


<div class="mc-cont"><div class="videoBox"  style="margin-bottom: 30px"><videoid="myVideo1"controlsclass="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js"preload="auto"style="width: 712px;height:320px;object-fit: fill"></video></div><div class="videoBox"  style="margin-bottom: 30px"><videoid="myVideo2"controlsclass="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js"preload="auto"style="width: 712px;height:320px;object-fit: fill"></video></div><div class="videoBox"  style="margin-bottom: 30px"><videoid="myVideo3"controlsclass="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js"preload="auto"style="width: 712px;height:320px;object-fit: fill"></video></div></div>

这是页面播放视频需要的video标签，我放了三个video,用来播放三个摄像头的画面

我前端使用vue,首先需要安装video.js

npm install video.js@5.6.0

安装完成后你的node_modules里会出现以下内容，video.js装5.x版本。（6.x版本剥离flash,还需安装video.js-flash）

  import videojs from 'video.js'import 'video.js/dist/video-js.css'

导入video.js及css

data() {return {list:[]    //这里用来存放视频地址
}methods: {OpenVideo(truckLicenseNo,type){//我这里是车牌号的一个点击事件，从后台获取拉取视频地址，这部分替换自己业务TruckService.PlayVideo({//车牌号truckLicenseNo: truckLicenseNo,}, (success) => {if (success) {//请求视频成功//判断打开全部或单个if (type==='all'){//list中push视频地址this.list.push( {src:'rtmp://192.144.134.83:19350/live/015049488761_1',id:1,},{src:'rtmp://192.144.134.83:19350/live/015049488761_1',id:2,},{src:'rtmp://192.144.134.83:19350/live/015049488761_1',id:3,})}else if (type==='one'){// videojs("myVideo1").reset();this.list.push( {src:'rtmp://192.144.134.83:19350/live/015049488761_1',id:1,})}else if(type==='two'){// videojs("myVideo2").reset();this.list.push( {src:'rtmp://192.144.134.83:19350/live/015049488761_1',id:2,})}else{// videojs("myVideo3").reset();this.list.push( {src:'rtmp://192.144.134.83:19350/live/015049488761_1',id:3,})}//返回true,拉流播放视频//从这儿开始循环地址并初始化video.jsthis.list.map((item,i)=>{let myPlayer = videojs('myVideo'+item.id, {sources:[{type: "rtmp/flv",src:item.src}],//属性可以去查中文文档controls: true,//自动播放属性,muted:静音播放autoplay: true,preload: "auto",textTrackDisplay: false,errorDisplay: false,controlBar: false,bigPlayButton: false,});//这里是video.js的监听事件，视频播放中，我延迟3秒执行修改视频窗口的样式myPlayer.on("play", function(){this.timer = setTimeout(()=>{   //设置延迟执行console.log('延时3秒放大窗口');debugger;let btns = document.getElementById('myVideo'+item.id+'_Flash_api')btns.style.height = "320px"btns.style.width = "712px"},3000);});})}});},
}

我在初始化时加了延迟修改样式，为了解决视频第一次打开画面不能铺满，非要放大再缩小才能铺满问题。如果遇到同样问题可以试试我的办法

let btns = document.getElementById('myVideo'+item.id+'_Flash_api') 获取的是video.js的视频加载后出现的dom,你可以自己看一眼就明白了。

一定要注意浏览器是否支持flash,是否打开允许flash,否则视频播放不了的

这是我用的浏览器

最后，成功播出画面，画面样式自己看着修改

最后说明一下，我要求实现的是打开全部摄像头画面或单个摄像头画面，代码比较乱，安装和初始化video.js部分可参考，其他的根据自己业务去写，看不懂的属性查看这里 videojs中文文档详解_谢泽的网络日志-CSDN博客_video.js

video.js播放rtmp视频相关推荐

video.js播放rtmp直播源和hls直播源
看了很多网上的坑,都是无法播放的,这次自己亲测能播放注意如果是自己制作的源的话,在推流之后要先等一小会才可以播放 video.js播放rtmp源一定要注意你的Chrome浏览器允许播放flash, ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
React使用Video.js播放rtmp，hls视频
公司最近项目需要实时播放摄像头传入的视频,支持rtmp,hls,rtsp格式视频.于是开始封装了一个简单的视视频播放器,刚开始使用的React-palyer但是React-player好像不支持rtm ...
video.js播放m3u8视频
m3u8 是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率先提出的 HLS 协议在 ...
使用video.js 播放youtube视频——踩坑记1
支持: youtube.com以及youtu.be 常规网址:http://www.youtube.com/watch?v = xjS6SftYQaQ 嵌入式网址:http://www.youtube ...
使用video.js播放rtmp流时报错FLASH: NetStream.Play.Failed
1.选用X5版本video.js,因为X6及以上版本不支持rtmp的播放 2.指定video-js.swf文件路径 videojs.options.flash.swf = "lib/vide ...
结合video.js播放rtmp格式、flv格式、mp4等格式的视频
https://blog.csdn.net/weixin_39150852/article/details/109156698
H5视频之video.js播放rtmp直播源和hls直播源
https://blog.csdn.net/qq285679784/article/details/85763086 https://blog.csdn.net/qq_27156945/article ...
Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流
场景 Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg): Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)_BADAO_ ...

video.js播放rtmp视频

video.js播放rtmp视频相关推荐

最新文章

热门文章