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

效果圖：

但是就像我本人的情況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">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();});
        })

效果圖：

可用的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

入坑錯誤總結：

1.如果瀏覽器還是提示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放到服務器上（本地訪問報錯）
4.video標籤 class 添加video-js 配合data-setup="{}" 缺一不可

完整案例下載及其說明（下載放到服務器就能播）

鏈接：https://pan.baidu.com/s/12gLJ1qDJM2cwzN5k2Y_W0Q
提取碼：y8tc

服務器路徑配置地址（大神忽略）：
注意： 瀏覽器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
方法：我用的方法是彈框顯隱用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

出現情況：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地址

代碼（裏面的路徑放要修改自己的）

但是就像我本人的情況html中不止這一個直播視頻，我們需要建立多個播放器

入坑錯誤總結：

完整案例下載及其說明（下載放到服務器就能播）

播放出來簡單，還需要實現點擊切換播放地址，解決錯誤

造成的原因和出現情況及其解決方法（我照我個人情況分析）：

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

CSDN排名前10強（最新！）

video-js rtmp直播、this .el_vjs_getproperty問題、多個rtmp播放、可用rtmp地址

vue-fullcalendar 點擊上月不跳轉

VS code快捷鍵和chrome快捷鍵

vue組件,父傳子、子傳父、父調子、子調父簡單理解總結

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結