video-js rtmp直播、this .el_vjs_getproperty问题、多个rtmp播放、可用rtmp地址

1.开始之前我们先看一下三种协议，RTMP、RTSP、HTTP协议。

1、RTMP协议

（1）RTMP(Real Time Messaging Protocol)实时消息传送协议是Adobe Systems公司为Flash播放器和服务器之间音频、视频和数据传输开发的开放协议。

（2）是流媒体协议。

（3）RTMP协议是 Adobe 的私有协议，未完全公开。

（4）RTMP协议一般传输的是 flv，f4v 格式流。

（5）RTMP一般在 TCP 1个通道上传输命令和数据。

2、RTSP协议

（1）是流媒体协议。

（2）RTSP协议是共有协议，并有专门机构做维护。.

（3）RTSP协议一般传输的是 ts、mp4 格式的流。

（4）RTSP传输一般需要 2-3 个通道，命令和数据通道分离。

3、HTTP协议

（1）不是是流媒体协议。

（2）HTTP协议是共有协议，并有专门机构做维护。

（3）HTTP协议没有特定的传输流。

（4）HTTP传输一般需要 2-3 个通道，命令和数据通道分离。

我们这里使用VIDEOJS库,所用的版本是video.js v5.18.4 ， 版本选择：我们要使用x5版本的，因为x6版本及以上不支持rtmp。 下载地址： video.js v5.18.4下载

代码（里面的路径放要修改自己的）

//css
<link href="assets/plugins/video5.18.4/css/video-js.css" rel="stylesheet">
//html
<video id="example_video_5" class="video-js vjs-default-skin videoStyle" controls autoplay preload="auto"  	height="230px" poster="assets/plugins/video5.18.4/m.jpg" data-setup="{}">
       <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1" type="rtmp/flv">
       <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
// js
<script src="assets/plugins/video5.18.4/js/video.min.js"></script>
<script src="assets/plugins/video5.18.4/js/videojs-ie8.min.js"></script>

var myPlayer5 = videojs('example_video_5');
videojs("example_video_5").ready(
	function(){
		var myPlayer5 = this;myPlayer5.play();
	}
);

poster=“assets/plugins/video5.18.4/m.jpg” 是不显示视频默认显示的图片

在保障代码引入正确且代码所在服务器上时，按上述代码就可以正常显示效果。如果是本地的html会报:
video.min.js:18 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. 在本地的可以搭个nginx服务器,五分钟的事儿搞定。参考：https://blog.csdn.net/zeng092210/article/details/93785099

效果图：

video-js rtmp直播、this .el_vjs_getproperty问题、多个rtmp播放、可用rtmp地址

但是就像我本人的情况html中不止这一个直播视频，我们需要建立多个播放器

引入文件和版本什么都不变

//视频1
<div class="cartoon cartoonRTMP1"></div>

//视频2
<div class="cartoon cartoonRTMP2"></div>

//视频3
<div class="cartoon cartoonRTMP2"></div>

//视频4
<div class="cartoon cartoonRTMP2"></div>

$(document).ready(function (){
			//路径地址数组
            var videoUrl = [
                'rtmp://live.hkstv.hk.lxdns.com/live/hks1',
				'rtmp://ns8.indexforce.com/home/mystream',
                'rtmp://live.hkstv.hk.lxdns.com/live/hks1',
                'rtmp://ns8.indexforce.com/home/mystream',
            ]
            var v_long = videoUrl.length;
            for(var pop = 1;pop < v_long+1;pop++){
                var videoHtml = '<video id="example_video_'+ pop +'" class="video-js vjs-default-skin videoStyle" controls preload="auto" height="230px"'
                                    +'poster="assets/plugins/video5.18.4/m.jpg" data-setup="{}">'
                                    +'<source src="'+ videoUrl[pop-1] +'" type="video/rtmp">'
                                    +'<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank" rel="external nofollow"  target="_blank">supports HTML5 video</a> </p>'
                                +'</video>'
                switch (pop){
                    case 1:
                        $('.cartoonRTMP1').append(videoHtml)
                        break;
                    case 2: 
                        $('.cartoonRTMP2').append(videoHtml)
                        break;
                    case 3:
                        $('.cartoonRTMP3').append(videoHtml)
                        break;
                    case 4:
                        $('.cartoonRTMP4').append(videoHtml)
                        break;
                    default:
                        alert('没有人要你...')
                }
                var videoHtml = ''
            }
            var myPlayer1 = videojs('example_video_1');
            videojs("example_video_1").ready(function(){var myPlayer1 = this;myPlayer1.play();});
            var myPlayer2 = videojs('example_video_2');
            videojs("example_video_2").ready(function(){var myPlayer2 = this;myPlayer2.play();});
            var myPlayer3 = videojs('example_video_3');
            videojs("example_video_3").ready(function(){var myPlayer3 = this;myPlayer3.play();});
            var myPlayer4 = videojs('example_video_4');
            videojs("example_video_4").ready(function(){var myPlayer4 = this;myPlayer4.play();});
        })

效果图：

video-js rtmp直播、this .el_vjs_getproperty问题、多个rtmp播放、可用rtmp地址

可用的rtmp测试地址:

rtmp://ns8.indexforce.com/home/mystream

rtmp://live.hkstv.hk.lxdns.com/live/hks1

rtmp://live.hkstv.hk.lxdns.com/live/hks2

rtmp://202.69.69.180:443/webcast/bshdlive-pc

入坑错误总结：

如果浏览器还是提示VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.，先查看浏览器是允许flash，点击地址前面感叹号-flash设置为允许

2.查看服务器地址配置支持不支持文件（比如我：引用bootstrap nginx没有配置支持eot、otf、ttf、woff、svg、woff2这些格式，本地可以放到服务器就不图标显示不出来）。

3.html放到服务器上（本地访问报错）

video标签 class 添加video-js 配合data-setup="{}"

缺一不可

完整案例下载及其说明（下载放到服务器就能播）

链接：https://pan.baidu.com/s/12gLJ1qDJM2cwzN5k2Y_W0Q

提取码：y8tc

服务器路径配置地址（大神忽略）：

video-js rtmp直播、this .el_vjs_getproperty问题、多个rtmp播放、可用rtmp地址

注意：

浏览器flash允许要打开

方式：路径前面感叹号 => 如果直接看到flash 选择允许。没有直接看到去网站设置里面设置

播放出来简单，还需要实现点击切换播放地址，解决错误

可能会偶遇几个常见的错误总结，先看下有机会偶遇的熟人

1 .
this .el_vjs_getproperty is not a function 2 . The element or ID supplied is not valid 3. Failed conversion between PP_Var and V8 value 4. 直播视频暂停后无法再播放

造成的原因和出现情况及其解决方法（我照我个人情况分析）：

错误1

：

video-js rtmp直播、this .el_vjs_getproperty问题、多个rtmp播放、可用rtmp地址

出现情况：多个视频间切换、视频在弹框中关闭弹框后

出现原因：可能是关闭窗口没有注销video

方法：我用的方法是弹框显隐用visibility，切换播放video用.src(）方法切换路径后用.load ()重新加载，

大佬文章推荐：https://github.com/videojs/video.js/issues/2247 和 https://blog.csdn.net/qq_18144905/article/details/88963416

解决方法：

1.将弹框的隐藏/显示方式改用为 visibility 方式

document.getElementById(“videoMode”).style.visibility=“collapse”; //隐藏

document.getElementById(“videoMode”).style.visibility=“visible”; // 显示

2.多视频切换：直接利用video的修改路径方式修改路径后重新加载

//动态设置播放地址 且每次重新加载
console.log('视频源...',videoUrl[Vurl])
var myPlayer5 = videojs('example_video_5');
myPlayer5.src([
    {type:"video/rtmp",src: videoUrl[Vurl]}
])
videojs("example_video_5").ready(function(){
    var myPlayer5 = this;
    // play 放在pause 中每次要重新加载是为了解决：暂停后不能再播放问题  问题4
    myPlayer5.on("pause", function () {
        myPlayer5.on("play", function () { myPlayer5.load (); myPlayer5.off("play"); });
    });
});

3.我们也可以用注销的方式：dispose()

但是注销又会引发第二种错误

错误2

video-js rtmp直播、this .el_vjs_getproperty问题、多个rtmp播放、可用rtmp地址

出现情况：videojs 对应js执行在html前或找不到对应ID

出现原因：页面加载了js var myPlayer5 = videojs(‘example_video_5’); 当html还没有加载完成，所以找不到ID

方法：保证ID对应，检查js能不能通过ID拿到内容

错误3

这个问题无缘无故出来，等改好剩下三个问题就自己好了，反正我的是这样

错误4

这个问题就比较常见了

出现情况：播放中暂停不能继续播放

方法：每次开始播放重新加载

大佬文章介绍：http://www.it1352.com/884892.html

var myPlayer1 = videojs('example_video_1');
videojs("example_video_1").ready(function(){
    var myPlayer1 = this;
    myPlayer1.play();
    myPlayer1.on("pause", function () {
        myPlayer1.on("play", function () { myPlayer1.load (); myPlayer1.off("play"); });
    });
});
//动态切换 代码在上面

缺点就是网络不好时每次开始播放都要重新加载

video-js rtmp直播、this .el_vjs_getproperty问题、多个rtmp播放、可用rtmp地址

代码（里面的路径放要修改自己的）

完整案例下载及其说明（下载放到服务器就能播）

播放出来简单，还需要实现点击切换播放地址，解决错误

继续阅读

EasyRTMP实现对接海康、大华等IPCamera SDK进行RTMP推送直播功能

vue使用video.js1.安装2.引入全局样式3.使用

用vue+videojs实现播放rtmp遇到的问题

使用video.js播放rtmp流时报错FLASH: NetStream.Play.Failed

使用ffmpeg将视频转为hls格式并播放

react 中使用 video.js 播放 hls(m3u8)格式的视频react 中使用 video.js 播放 hls(m3u8)格式的视频

videojs的坑videojs

videojs播放器iframe无法全屏

如何编译打包video.js如何获取video.js的代码编译打包video.js

video.js使用技巧

Vue videojs 在开发环境正常，生产环境下报错：t is not defined

video.js rtmp/hls 直播流状态监听

视频播放器，基于videojs,NVR

videojs 直播播放HLS流 h264

搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)一、几种播放器选择

videoJs播放视频