最近接手一个项目,里面需要实现播放实时监控视频的功能.找了很久,发现用VideoJs可以实现播放rtmp视频流,于是便开始了踩坑之旅了
videojs版本是5.6.0
- 介绍
Video.js是一款web视频播放器，支持html5和flash两种播放方式.更有自定义皮肤，插件，组件，
语言还有丰富的选项配置.本次使用videojs 播放rtmp直播视频流媒体.
- 安装
npm i -D [email protected]
- 引入
import VideoJs from 'video'
- 使用
style="width:100%;height:100%;object-fit: fill" 的作用是使播放器自适应其父元素的大小
muted : 实现静音播放, 有一些浏览器需要静音才能实现加载之后自动播放
controls: 将显示视频控件, 如果不需要则去掉controls即可.
autoplay: 视频在加载完成之后自动播放; 注意,这里在Chrome62.X上有坑, 如果播放器大小小于400*300的话是不会自动播放的.
poster: 视频封面图片;
loop: true/false, 是否循环播放
- 实例化Video
CreatePlayer(id) {
var options = {
autoplay : true,
preload : true,
falsh: {
swf: './lib/video-js.swf'
}
}
let self = this;
return videojs(id, options, function onPlayerReady() {
videojs.log(`Your player${self.index} is ready!`);
// How about an event listener?
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
this.on('error', function() {
console.log('error');
})
this.on("abort", function() {
console.log("abort");
});
this.on("emptied", function() {
console.log("emptied");
});
this.on('loadstart', () => {
self.player.play();
});
this.on('stalled ', function() {
console.log("stalled");
});
});
}
videoJs()接收三个参数, DOM元素的ID, videoJs的配置, 以及一个回调函数.
- 播放
playVideo(url) {
this.player = this.CreatePlayer(this._id);
this.player.src({
src : url,
type: 'rtmp/flv',
autoplay: true,
isFullscreen: true
});
}
- 全屏切换 (浏览器不允许使用函数全屏, 一定要用户有操作触发)
- 进入全屏, 需要参入要全屏的DOM元素即包裹视频的盒子
enterFullScreen(ele) {
if (ele .requestFullscreen) {
ele .requestFullscreen();
} else if (ele .mozRequestFullScreen) {
ele .mozRequestFullScreen();
} else if (ele .webkitRequestFullScreen) {
ele .webkitRequestFullScreen();
}
}
- 退出全屏
exitFullscreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}
- 控制视频正中的播放按钮
$('.vjs-big-play-button') // 获取该dom元素
- 取消播放
videoJs提供一个api --- video.dispose()
但是使用dispose会将整个video从dom中移除,之后无法再重新播放视频
所以我们先把video标签保存起来
self.player.dispose();
let _id = self._id;
let video_dom = "";
// 将video标签重新插入html
$('#' + self.mask_id).before(video_dom);
然后便可以重新实例化videojs, 加载url播放视频
- 问题: videojs提示 (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video.
解决:
image.png
选择网站设置, 将flash设置为允许(chrome默认不让flash播放)
image.png
- 问题: videojs标签大小小于400*300时不会自动播放
解决: 将flash.swf下载到本地, 从本地加载. 设置 videojs.options.flash = "本地swf文件地址"; 如果设置不成功, 可以直接修改video.js里面的配置.
image.png