最近公司要求拉取某公司流媒体服务器的视频监控,并在web端页面播放,流媒体服务器发送的是rtmp格式视频流,经过网上查资料,最后敲定使用video.js
rtmp流需要依托flash播放,现在大多浏览器已经禁止使用flash,所以非必要不使用。
回顾我一个大后端在video.js道路上的心酸史,泪流满面!!!网上资料千篇一律,贼鸡巴坑。我也并不是很懂,现在把自己成功后的代码分享一下,希望能帮助哪怕一个人。
<div class="mc-cont">
<div class="videoBox" style="margin-bottom: 30px">
<video
id="myVideo1"
controls
class="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">
<video
id="myVideo2"
controls
class="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">
<video
id="myVideo3"
controls
class="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.js
this.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