記錄一個播放hls.m3u8直播流的demo,純ajax非同步通訊示例,
阿新 • • 發佈：2020-12-24
記錄之前先補充一點知識,目前所有的瀏覽器都支援H.264編碼格式的視訊(2003年出的,專利費也還可以,不貴),但是目前主流瀏覽器都不支援H.265編碼格式的視訊(因為專利費太貴,主流瀏覽器廠家不想出多餘H.264幾十倍的專利費,為了省下幾個億美金,因為視訊渲染格式轉化需要大量的cpu算力或者效果稍差的GPU算力,各大瀏覽器廠商聯合各大硬體廠商推出了開源的AV1編碼格式,目前還沒大面積推廣.不過在利益的驅動下,只是時間問題,這樣直播視訊流就不用轉來轉去,浪費資源了)
問題:視訊從流媒體伺服器獲取的hls.m3u8直播流無法正常播放,但是後臺有資料.使用potplayer可以進行播放
解決方法:將攝像頭視訊編碼格式修改為H.264
分析:排查攝像頭為H.265編碼格式,但是主流瀏覽器僅支援H.264,流媒體伺服器也沒有進行轉碼,因此到達流媒體伺服器的是H.265編碼.流媒體轉發的也是H.265編碼,為了少一步轉碼,將攝像頭編碼格式修改為H.264,然後搞定.
此處給出cctv1的直播流進行測試,並且此處按鈕使用了ajax非同步通訊
<!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>cctv</title> <script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"charset="utf-8"></script> </head> <body> <div id="myDiv">測試</div> <button type="button" onclick="catalog()">獲取通道</button> <button type="button" onclick="loadInvite()">拉流</button> <br> <button type="button" onclick="moveleft()">left</button> <button type="button" onclick="moveright()">right</button> <button type="button" onclick="movestop()">stop</button> <br><br><br><br><br> <div id="id_test_video" style="width:100%; height:auto;"></div> <script> var player = new TcPlayer('id_test_video', { "m3u8": "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8", //請替換成實際可用的播放地址 "autoplay" : true, //iOS 下 safari 瀏覽器，以及大部分移動端瀏覽器是不開放視訊自動播放這個能力的 "poster" : "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=205652071,1642882044&fm=26&gp=0.jpg", "width" : '640',//視訊的顯示寬度，請儘量使用視訊解析度寬度 "height" : '480'//視訊的顯示高度，請儘量使用視訊解析度高度 }); </script> </body> <script> var xmlhttp; function get(url,data,cfunc) { if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 程式碼 xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 程式碼 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url+"?"+data,true); xmlhttp.send(); } function post(url,data,cfunc) { if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 程式碼 xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 程式碼 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("POST",url,true); xmlhttp.send(data); } //獲取流命令 function loadInvite() { let msg = "msg=client test"; get("/gettv",msg,function(){ //返回函式 if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } //left function moveleft() { let msg = ""; get("/moveleft",msg,function(){ //返回函式 if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } //stop function movestop() { let msg = ""; get("/movestop",msg,function(){ //返回函式 if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } //right function moveright() { let msg = ""; get("/moveright",msg,function(){ //返回函式 if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } function catalog() { let msg = ""; get("/catalog",msg,function(){ //返回函式 if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </html>