使用videojs播放rtmp时直播画面静止不动解决方案

使用videojs播放rtmp时直播画面静止不动解决方案

需求接入http以及rtmp两种格式的直播页面，所采用的的插件为videojs。http格式的直播为html5播放器，而rtmp格式却需要网页的flash。

videojs的版本选择

版本选择： x5版本的videojs自带flash插件，而x6版本及以上则需要手动引入videojs-flash.min.js。百度一堆，这里就不放下载地址了。

这里我采用了
“video.js”: “^7.3.0”,
同时也引入了 videojs-flash.min.js。

产生的问题

在播放http格式的直播时正常播放。在播放rtmp格式的直播时有画面，但是画面却静止不动，点击暂停再播放后，直播画面会顺时改变且依旧静止。 这里我又试了下不同版本下的videojs，但结果都一样。rtmp格式的直播依旧画面静止不动。

解决方案

最终尝试无果之后我打算播放http时使用videojs，可正常播放，播放rtmp格式的直播时使用另外一个播放器。
百度后发现一款国内的播放器 ckplayer，没有细看，但文档写的比较详细而且是中文=。= 可自行百度研究。尝试后发现可用，虽然感觉直播时不时特别流畅，但能用啊…

示例代码

因为需要在一个页面切换直播地址，这里采用了动态加载videojs的src。
html：

//此处放两个div容器分别播放http和rtmp两种格式的直播。
<div class="top-ten"  id="videoBox"> </div>
<div class="top-ten"  id="video2"> </div>

js：

		//判断是否为rtmp格式
		if(res.data.videoUrl.substr(0,4)!='rtmp'){
                this.isRTMP = false;
				let videoBox = document.getElementById('videoBox')
                    if( this.videoPlayer){
                        this.videoPlayer.dispose()
                    }
                    if(videoBox.innerHTML.replace(/(^\s*)|(\s*$)/g, "").length==0){
                        let str = `
                            <video id="video" class="video-js" controls data-setup="{}" style="margin:0 auto;position: relative;height: 100%;width: 100%;">
                                <source id="videoSource" src="" >
                                <p class="vjs-no-js">请升级你的浏览器</p>
                            </video>
                        `
                        videoBox.innerHTML = str;
                        this.videoPlayer = videojs('video', {autoplay: false, controls: true,
                            sources:[{
                                src:res.data.videoUrl,//此处为后台获取的直播地址
                            }]
                        },function(){
                            console.log(this)
                        });
                    }
                }else{
                    this.isRTMP = true;
                    var videoObject = {
                        container: '#video2', //容器的ID或className
                        variable: 'player',//播放函数名称
                        autoplay:false,
                        live:true,
                        flashplayer:true,
                        video: res.data.videoUrl
                    };
                    var player = new ckplayer(videoObject);
                }

注意事项

使用ckplayer时需要将ckplayer.swflanguage.xmlstyle.xml这三个文件放在服务器根目录，播放rtmp时需要将浏览器flash设为允许。