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

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

videojs版本是5.6.0

介绍

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

安装

  npm i -D video.js@5.6.0

引入

 import VideoJs from 'video'

使用

<video :id="_id" class="video-js vjs-default-skin vjs-big-play-centered flex-grid" style="width:100%;height:100%;object-fit: fill" muted controls autoplay poster= './video.jpg' loop>
  抱歉, 你的浏览器不支持
</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 id='" + _id + "' class='video-js vjs-default-skin vjs-big-play-centered flex-grid' style='width:100%;height:100%;object-fit: fill' muted></video>";

// 将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

最后编辑于：2018.11.27 14:30:10