记录之前先补充一点知识,目前所有的浏览器都支持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> <meta charset="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>