在Vue组件中使用Video播放rtmp视频流

最近接手一个项目,里面需要实现播放实时监控视频的功能.找了很久,发现用VideoJs可以实现播放rtmp视频流,于是便开始了踩坑之旅了

videojs版本是5.6.0

• 介绍

Video.js是一款web视频播放器，支持html5和flash两种播放方式.更有自定义皮肤，插件，组件，  
语言还有丰富的选项配置.本次使用videojs 播放rtmp直播视频流媒体.

• 安装

  npm i -D [email protected]

• 引入

 import VideoJs from 'video'

• 使用

1. style="width:100%;height:100%;object-fit: fill" 的作用是使播放器自适应其父元素的大小

2. muted : 实现静音播放, 有一些浏览器需要静音才能实现加载之后自动播放

3. controls: 将显示视频控件, 如果不需要则去掉controls即可.

4. autoplay: 视频在加载完成之后自动播放; 注意,这里在Chrome62.X上有坑, 如果播放器大小小于400*300的话是不会自动播放的.

5. poster: 视频封面图片;

6. 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
            });
        }

• 全屏切换 (浏览器不允许使用函数全屏, 一定要用户有操作触发)

1. 进入全屏, 需要参入要全屏的DOM元素即包裹视频的盒子

enterFullScreen(ele) {

            if (ele .requestFullscreen) {
                ele .requestFullscreen();
            } else if (ele .mozRequestFullScreen) {
                ele .mozRequestFullScreen();
            } else if (ele .webkitRequestFullScreen) {
                ele .webkitRequestFullScreen();
            }
        }

2. 退出全屏

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