在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();
            }
        }
  1. 退出全屏
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

你可能感兴趣的:(在Vue组件中使用Video播放rtmp视频流)