整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文由 ChatMoney團(tuán)隊(duì)出品
在我們開(kāi)發(fā)網(wǎng)站應(yīng)用時(shí)，我們可能會(huì)遇到腳本加載失敗的情況，導(dǎo)致腳本加載失敗的原因有很多，比如用戶的網(wǎng)絡(luò)問(wèn)題、終端設(shè)備問(wèn)題、用戶瀏覽器版本等諸多因素。
在 JavaScript 中，我們可以創(chuàng)建一個(gè)監(jiān)聽(tīng)來(lái)監(jiān)聽(tīng)腳本加載失敗的情況，然后針對(duì)加載失敗的腳本進(jìn)行重新加載。
重新加載的方案，一般是通過(guò)更換域名來(lái)解決。我們給每個(gè)腳本添加一個(gè)映射關(guān)系表，用來(lái)在加載失敗時(shí)匹配新的域名進(jìn)行重試。
具體的解決方案，下面我一步一步講解，另外希望大家可以仔細(xì)閱讀注釋中的內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>腳本加載失敗如何重試</title>
<script>
window.addEventListener(
"error", // 監(jiān)聽(tīng)全局錯(cuò)誤
function (e) {
console.log(e);
},
true // 由于腳本加載失敗不會(huì)冒泡，所以我們要在捕獲階段進(jìn)行監(jiān)聽(tīng)
);
</script>
</head>
<body>
<script src="https://www.zowlsat.com/api/1.js"></script>
<script src="https://www.qqqqqqq.com/api/2.js"></script>
<script src="https://www.zowlsat.com/api/3.js"></script>
</body>
</html>此時(shí)我們可以在瀏覽器控制臺(tái)看到以下效果
但是這個(gè)監(jiān)聽(tīng)方法會(huì)監(jiān)聽(tīng)到很多其他的錯(cuò)誤，我們只需要監(jiān)聽(tīng)腳本加載失敗的錯(cuò)誤，所以我們要通過(guò)這個(gè)監(jiān)聽(tīng)事件的參數(shù) e 來(lái)判斷了
根據(jù)上圖我們可以發(fā)現(xiàn)，普通錯(cuò)誤的類型是 ErrorEvent，而腳本加載失敗的類型是 Event，并且他的 target 會(huì)指向 script 標(biāo)簽，所以我們根據(jù)這個(gè)區(qū)別過(guò)濾掉其他的錯(cuò)誤，這樣剩下的情況才是我們需要處理的。
window.addEventListener(
"error",
function (e) {
if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return;
console.log(e);
},
true
);接下來(lái)就是如何來(lái)實(shí)現(xiàn)重新加載，我們先給需要重新加載的域名建立一個(gè)映射關(guān)系，用于替換映射關(guān)系表中的域名。然后就是挨個(gè)匹配，當(dāng)還是加載失敗時(shí)繼續(xù)匹配下一個(gè)，直到成功為止。
const domainList = ["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"];
const retry = {};
window.addEventListener(
"error",
function (e) {
if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return;
// 創(chuàng)建一個(gè)URL對(duì)象
const url = new URL(e.target.src);
// 獲取文件路徑
const key = url.pathname;
// 假如映射表中沒(méi)有這個(gè)文件路徑，那么就初始化一個(gè)映射鍵
if (!(key in retry)) {
retry[key] = 0;
}
// 假如匹配完整個(gè)映射表都沒(méi)重新加載成功，則放棄
const index = retry[key];
if (index >= domainList.length) {
return;
}
// 獲取新的完整路徑
const domain = domainList[index];
// 替換域名
url.host = domain;
// 創(chuàng)建新的script標(biāo)簽
const script = document.createElement("script");
script.src = url.toString();
// 將新的script標(biāo)簽追加到加載失敗的script標(biāo)簽之前
document.body.insertBefore(script, e.target);
retry[key]++;
},
true // 由于腳本加載失敗不會(huì)冒泡，所以我們要在捕獲階段進(jìn)行監(jiān)聽(tīng)
);到此為止，我們功能已經(jīng)基本實(shí)現(xiàn)，效果如下圖
但是有一個(gè)很關(guān)鍵的問(wèn)題，就是假如我 2.js 這個(gè)文件中的內(nèi)容，在 3.js 中要使用，那這樣的話，2.js 就必須加載到 3.js 之前，否則就會(huì)報(bào)錯(cuò)。此時(shí)，我們就需要在 2.js 加載失敗時(shí)，阻塞瀏覽器的解析，知道重新加載完成或者放棄重新加載時(shí)，再繼續(xù)渲染之后的內(nèi)容。
那這樣的話我們?cè)撛趺醋瞿兀?/strong>
其實(shí)很簡(jiǎn)單，在我們?nèi)腴T(mén) js 時(shí)就學(xué)到過(guò)一個(gè)知識(shí)點(diǎn)，就是使用document.write
document.write這個(gè)方法在解析期間使用的話，會(huì)阻塞瀏覽器的解析，而我們現(xiàn)在就是需要阻塞瀏覽器解析，那此時(shí)我們只需要將創(chuàng)建 script 標(biāo)簽的方法更換為document.write方法即可。
修改之后的代碼如下：
const domainList = ["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"];
const retry = {};
window.addEventListener(
"error",
function (e) {
if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return;
const url = new URL(e.target.src);
const key = url.pathname;
if (!(key in retry)) {
retry[key] = 0;
}
const index = retry[key];
if (index >= domainList.length) {
return;
}
const domain = domainList[index];
url.host = domain;
// 此處加上轉(zhuǎn)譯是因?yàn)榉乐咕幾g器識(shí)別script標(biāo)簽為結(jié)束標(biāo)簽報(bào)錯(cuò)
document.write(`\<script src="${url.toString()}">\<\/script>`);
// const script = document.createElement("script");
// script.src = url.toString();
// document.body.insertBefore(script, e.target);
retry[key]++;
},
true
);現(xiàn)在我們?cè)俅蜷_(kāi)控制臺(tái)查看，現(xiàn)在js文件按它原來(lái)的順序執(zhí)行了，這樣既不會(huì)改變?cè)械拇a邏輯，又可以在可控范圍內(nèi)進(jìn)行重新加載。
效果如下圖：
以上是簡(jiǎn)單實(shí)現(xiàn)了一個(gè)js文件重新加載錯(cuò)誤的方案，其實(shí)這個(gè)方案也可以運(yùn)用到其他很多類型的文件，不限于js文件。
然后我們還需要更加細(xì)化這個(gè)方法的話，我們可能還需要考慮到這個(gè)script標(biāo)簽是否帶有async、defer等屬性，還有諸多需要考慮的點(diǎn)，但是沿著這個(gè)方向解決的話，大體是沒(méi)有問(wèn)題的。
本文由ChatMoney團(tuán)隊(duì)出品，ChatMoney專注于AI應(yīng)用落地與變現(xiàn)，我們提供全套、持續(xù)更新的AI源碼系統(tǒng)與可執(zhí)行的變現(xiàn)方案，致力于幫助更多人利用AI來(lái)變現(xiàn)，歡迎進(jìn)入ChatMoney獲取更多AI變現(xiàn)方案！
們從播放開(kāi)始，因?yàn)橛^看直播最重要的一個(gè)環(huán)節(jié)就是打開(kāi)播放器，很多問(wèn)題的直接反饋也是來(lái)自觀眾端。
導(dǎo)致播放失敗的原因，有很多種，不一定是播放器本身的問(wèn)題，不過(guò)通過(guò)播放器，我們很容易反過(guò)來(lái)排查服務(wù)端或者推流端的問(wèn)題。下面我們會(huì)從播放失敗的表現(xiàn)、播放問(wèn)題排查工具、常見(jiàn)問(wèn)題分析等多個(gè)方面展開(kāi)討論。
播放失敗的表現(xiàn)總結(jié)下來(lái)包括但不限于以下這些：
- 界面上一直顯示 “加載中”，或者提示播放失敗的錯(cuò)誤
- 播放畫(huà)面卡死不動(dòng)，但 UI 按鈕可以點(diǎn)擊
- 有聲音沒(méi)有畫(huà)面，有畫(huà)面沒(méi)有聲音
這里并不討論如播放卡頓、音畫(huà)不同步、馬賽克、延時(shí)、花屏等問(wèn)題，這些話題，我們將會(huì)在后續(xù)的文章中探討，本文重點(diǎn)關(guān)注的是：為啥無(wú)法順利 “打開(kāi)” 直播流 ？
一旦我們遇到視頻播放不了，第一件事，就是要找?guī)讉€(gè)別的播放器也播放看看，做一下對(duì)比測(cè)試，或者對(duì)碼流做一些基礎(chǔ)分析，以便更好地定位問(wèn)題的源頭，各個(gè)平臺(tái)比較常見(jiàn)的播放/分析工具有如下幾個(gè)：
ffplay，ffprobe，mediainfo，hls-analyzer 等
http://www.cutv.com/demo/live_test.swf
SRS
vlc，vplayer，mxplayer 等
mp4info，F(xiàn)lvParse，F(xiàn)LVMeta，Elecard StreamEye Studio 等
音視頻開(kāi)發(fā)學(xué)習(xí)地址：C/C++Linux服務(wù)器開(kāi)發(fā)/后臺(tái)架構(gòu)師【零聲教育】-學(xué)習(xí)視頻教程-騰訊課堂
【文章福利】：小編整理了一些個(gè)人覺(jué)得比較好的學(xué)習(xí)書(shū)籍、視頻資料共享在群文件里面，有需要的可以自行添加哦！~點(diǎn)擊832218493加入（需要自取）
從給播放器傳入播放地址，到播放畫(huà)面顯示出來(lái)，一般有如下幾個(gè)步驟：
- DNS 解析，將播放地址中的域名解析為對(duì)應(yīng)的服務(wù)器 ip 地址
- 連接服務(wù)器，完成 http 請(qǐng)求或者 rtmp 握手過(guò)程
- 接收服務(wù)器發(fā)送的數(shù)據(jù)，解協(xié)議解封裝，拿到音視頻數(shù)據(jù)解碼播放
任何一個(gè)環(huán)節(jié)出了問(wèn)題，都有可能導(dǎo)致播放失敗，不同的協(xié)議，由于協(xié)議層原因，播放報(bào)錯(cuò)往往不太一樣，我們下面的討論，主要以 RTMP/HTTP 這兩種協(xié)議為主，假設(shè)正常的播放測(cè)試地址如下：
香港衛(wèi)視的 RTMP 直播流：rtmp://live.hkstv.hk.lxdns.com/live/hks
W3C School 的測(cè)試 mp4 流：http://www.w3school.com.cn/i/movie.mp4
如果播放地址的域名無(wú)法解析，會(huì)導(dǎo)致播放失敗，一般斷網(wǎng)了或者域名無(wú)效，則播放的時(shí)候，會(huì)有類似如下報(bào)錯(cuò)：
$ ffplay rtmp://live.hkstv.hk.lxdns.com1/live/hks
Failed to resolve hostname live.hkstv.hk.lxdns.com1: nodename nor servname provided, or not knownFailed to resolve hostname live.hkstv.hk.lxdns.com1: No address associated with hostname當(dāng)然，如果有網(wǎng)絡(luò)，但是域名解析失敗，一般 ISP 運(yùn)營(yíng)商可能會(huì)返回一些類似 404 頁(yè)面，或者跳轉(zhuǎn)到其他的默認(rèn)網(wǎng)頁(yè)，因此，對(duì)于 HLS，HTTP-FLV，HTTP-mp4 等碼流，會(huì)因?yàn)樽x到一些 “臟數(shù)據(jù)” 從而返回一些其他的錯(cuò)誤，例如：
$ ffplay http://www.w3school2.com.cn1/i/movie.m3u8
http://www.w3school2.com.cn1/i/movie.m3u8: Operation timed out
$ ffplay http://www.w3school2.com.cn1/i/movie.mp4
http://www.w3school2.com.cn1/i/movie.mp4: Invalid data found when processing input遇到這類錯(cuò)誤，一般可以通過(guò) ping 一下域名試試，看看是否可以 ping 通，如果 ping 不通，則可能要檢查下域名解析的配置了。
如果域名正確，并且有網(wǎng)絡(luò)連接的狀態(tài)，多半是可以正常解析出服務(wù)器 ip 地址的，但是依然有連接失敗的可能，比如，這臺(tái)服務(wù)器相應(yīng)的服務(wù)掛掉了，或者并沒(méi)有在相應(yīng)的端口提供服務(wù)，從而導(dǎo)致播放器連接失敗，類似問(wèn)題的報(bào)錯(cuò)如下：
$ ffplay rtmp://www.jhuster.com/live/hks
Cannot open connection tcp://www.jhuster.com:1935rtmp://www.jhuster.com/live/hks: Operation timed out因?yàn)?www.jhuster.com 對(duì)應(yīng)的服務(wù)器并沒(méi)有提供 rtmp 拉流服務(wù)，因此通過(guò) 1935 連接該服務(wù)器會(huì)失敗。
$ ffplay https://www.w3school.com.cn/i/movie.mp4
Connection to tcp://www.w3school.com.cn:443 failed: Connection refused因?yàn)?w3school 在線教程 并不支持 https 訪問(wèn)，因此通過(guò) 443 接口請(qǐng)求 https 連接失敗
當(dāng)然，也有可能是這臺(tái)服務(wù)器雖然提供了 rtmp 拉流服務(wù)但是宕機(jī)了，因此，我們需要通過(guò) dig 命令確定最終訪問(wèn)的是哪一臺(tái)服務(wù)器，并排查下該服務(wù)器為什么無(wú)法連接，當(dāng)然，最好是修改下 ffpmeg 源碼，把解析出來(lái)的服務(wù)器 ip 地址打印出來(lái)，這樣就可以直接看到所連接的服務(wù)器地址了。
對(duì)于 http 協(xié)議的直播地址，請(qǐng)求的播放資源不存在，返回的錯(cuò)誤還是比較快的，比如：
$ ffplay http://jhuster.com/live/hks.mp4
Page not found · GitHub Pages Server returned 404 Not Found
$ ffplay http://www.w3school2.com.cn/i/movie2.mp4
http://www.w3school2.com.cn/i/movie2.mp4: Invalid data found when processing input注：由于讀到 ISP 運(yùn)營(yíng)商返回的跳轉(zhuǎn)頁(yè)面的 “臟數(shù)據(jù)”，因此也有可能返回上面這種錯(cuò)誤
而 RTMP 直播協(xié)議，跟 HTTP 協(xié)議的播放，有著一個(gè)很大的不同，就是播放器請(qǐng)求的數(shù)據(jù)，并不一定 “存放” 在服務(wù)器，因此，服務(wù)器無(wú)法簡(jiǎn)單通過(guò) URI 定位不到則返回 404，這些數(shù)據(jù)是在 RTMP 握手之后，由生產(chǎn)端逐步產(chǎn)生并由服務(wù)器轉(zhuǎn)發(fā)到客戶端，因此很難簡(jiǎn)單判斷說(shuō) “資源不存在”。
通常 RTMP 協(xié)議的直播流，如果推流端沒(méi)有推流了，播放器這邊一般是讀數(shù)據(jù)超時(shí)后才會(huì)返回錯(cuò)誤，例如：
$ ffplay rtmp://live.hkstv.hk.lxdns.com/live/hks1
rtmp://live.hkstv.hk.lxdns.com/live/hks1: Input/output error視頻流的采用的網(wǎng)絡(luò)協(xié)議、編碼格式、封裝格式有很多種，網(wǎng)絡(luò)協(xié)議比如 http/https/rtmp/rtsp 等等，編碼格式比如 h.264，mpeg4，aac，speex 等等，封裝格式比如 flv，mp4，avi，rmvb 等等，這些協(xié)議和格式的流，都是需要播放器專門(mén)添加支持的，因此，播放器遇到不支持的協(xié)議或者格式，也會(huì)導(dǎo)致播放失敗，如下所示：
https://www.jhuster.com/xxxx.mp4 Protocol not found
http://www.jhuster.com/xxxx.rmvb Invalid data found when processing input出現(xiàn)該錯(cuò)誤的原因可能有如下幾點(diǎn)：
- 音頻/視頻的編碼格式不支持，導(dǎo)致解碼失敗
- 音頻/視頻的數(shù)據(jù)內(nèi)容異常，導(dǎo)致解碼失敗
- 基于 ffmpeg 的播放器的 `probesize` 設(shè)置太小，導(dǎo)致解析碼流信息不足
- 碼流/文件本身的前半段只有音頻沒(méi)有視頻，或者只有視頻沒(méi)有音頻
這個(gè)問(wèn)題播放啟動(dòng)流程已經(jīng)完成，只是出現(xiàn)了畫(huà)面缺失、或者音頻缺失，也算是一種播放失敗，限于本文篇幅，該問(wèn)題后面會(huì)抽出專門(mén)的章節(jié)來(lái)分析。
上面只分析了常見(jiàn)的播放失敗問(wèn)題，其實(shí)導(dǎo)致播放失敗的原因還有千千萬(wàn)萬(wàn)種，這里無(wú)法一一都列出來(lái)，不過(guò)通過(guò) ffplay 的報(bào)錯(cuò)，就知道大概的原因，再聯(lián)合服務(wù)端一起調(diào)試調(diào)試，一般都是可以找到根本原因的。下面是 ffmpeg 常見(jiàn)的錯(cuò)誤分類：
http://ffmpeg.org/doxygen/trunk/error_8h_source.html
-----------------------------------
?著作權(quán)歸作者所有：來(lái)自51CTO博客作者Jhuster的原創(chuàng)作品，請(qǐng)聯(lián)系作者獲取轉(zhuǎn)載授權(quán)，否則將追究法律責(zé)任
直播疑難雜癥排查（1）— 播放失敗
直播疑難雜癥排查（1）- 播放失敗
很多剛剛接觸css的新手有時(shí)會(huì)遇到css加載失敗這個(gè)問(wèn)題，但測(cè)試時(shí)，網(wǎng)頁(yè)上沒(méi)有顯示該樣式的問(wèn)題，這就說(shuō)明CSS加載失敗了。出現(xiàn)這種狀況一般是因?yàn)榈腸ss路徑書(shū)寫(xiě)錯(cuò)，或者是在瀏覽器中禁止掉了css的加載，可以重新啟動(dòng)瀏覽器刷新，在文件中css的調(diào)用，一般都是通過(guò)link加上你的路徑來(lái)實(shí)現(xiàn)，具體可以看下代碼：
<!DOCTYPE html><html><head><meta charset="UTF-8"> <title>index</title> <link rel='stylesheet' type='text/css' href='./css/index1.css'> //注意好文件名的書(shū)寫(xiě)就沒(méi)問(wèn)題了。
造成css加載失敗的原因有很多，這可能跟你代碼出錯(cuò)，瀏覽器、路徑、編碼等等都是有關(guān)聯(lián)的。所以在具體情況具體分析。最常見(jiàn)的失敗原因有以下幾類：
1.網(wǎng)絡(luò)原因
IIS空間不足、瀏覽者網(wǎng)速慢、空間速度慢等網(wǎng)絡(luò)因素是造成CSS加載失敗的原因之一，其具體表現(xiàn)為：當(dāng)我們打開(kāi)網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)布局完整，但卻沒(méi)有任何布局樣式顯示。
2.路徑錯(cuò)誤或者代碼不兼容
如果網(wǎng)頁(yè)打開(kāi)時(shí)，沒(méi)有顯示CSS設(shè)定的樣式，只以原始狀態(tài)顯示。那么就可能是我們CSS文件路徑出錯(cuò)或者CSS代碼不兼容了。
3.if造成失敗
第三個(gè)原因是，我們編在寫(xiě)CSS時(shí)，可能使用了if判斷語(yǔ)句對(duì)什么瀏覽器調(diào)用什么CSS文件時(shí)疏忽造成if調(diào)用的混亂，導(dǎo)致在某些瀏覽器上能正常顯示，在某些瀏覽器上不能正常顯示。對(duì)于這個(gè)原因，解決方法就是好好檢查造成CSS加載失敗的if判斷設(shè)置。
4.另類CSS加載失敗
何為另類CSS加載失敗？這是由于我們本身的CSS代碼寫(xiě)法有問(wèn)題，沒(méi)有設(shè)置好造成在各瀏覽器顯示不同布局差距效果。在CSS里面，我們稱為css hack。
5、瀏覽器導(dǎo)致
在Chrome瀏覽器的錯(cuò)誤控制臺(tái)下看看css文件有沒(méi)有加載進(jìn)來(lái)，確定已加載的話，檢查元素的類名與CSS中定義的類名是否相同。可能局限于ie瀏覽器，你用谷歌瀏覽器就會(huì)出現(xiàn)錯(cuò)誤。所以嘗試換個(gè)瀏覽器，然后等會(huì)在用，也可能修復(fù)故障。
6、編碼不對(duì)
如果不是上述問(wèn)題則看一看你的CSS文件的字符集是否和你的調(diào)用CSS文件的網(wǎng)頁(yè)的字符集是否一致，就是charset屬性那里。在你使用瀏覽器進(jìn)行瀏覽效果的時(shí)候，ie瀏覽器中菜單欄上有一個(gè)“查看--編碼”，在查看編碼上面UTF-8或者GBK看看是不是同一個(gè)編碼。可能是編碼不一致所造成。
以上就是造成CSS加載失敗最常見(jiàn)的六大原因。我們了解這些原因后，如果在實(shí)際操作中遇到類似問(wèn)題，便可逐一對(duì)照排查，對(duì)癥下藥解決問(wèn)題。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
