摘要：此文已由作者吳家聯(lián)授權(quán)網(wǎng)易云社區(qū)發(fā)布。歡迎訪問(wèn)網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)。播放器的設(shè)計(jì)思路重構(gòu)后應(yīng)該包含這些功能支持點(diǎn)播非加密的和直播播放兼容適配移動(dòng)端根據(jù)平臺(tái)自動(dòng)選擇使用還是。直播的一些特點(diǎn)直播狀態(tài)的判斷。

此文已由作者吳家聯(lián)授權(quán)網(wǎng)易云社區(qū)發(fā)布。

歡迎訪問(wèn)網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)。

去年年中的時(shí)候，借著產(chǎn)品改版的機(jī)會(huì)，將之前的h5播放器好好整理重構(gòu)了一番。之前的h5播放器較為簡(jiǎn)陋，有幾個(gè)大問(wèn)題：沒(méi)有適配移動(dòng)端（最大的不足）、沒(méi)有提供直播模式、有一些歷史遺留的bug沒(méi)有修復(fù)。重構(gòu)版除了解決了這幾個(gè)大問(wèn)題外，還做了很多的優(yōu)化。加上與flash播放器的結(jié)合和近期飛哥主導(dǎo)的教育產(chǎn)品組件標(biāo)準(zhǔn)化，播放器適用性變得更強(qiáng)更通用了。

h5播放器的設(shè)計(jì)思路?

重構(gòu)后應(yīng)該包含這些功能：支持點(diǎn)播（非加密的MP4）和直播播放（m3u8）、兼容（適配）移動(dòng)端、根據(jù)平臺(tái)自動(dòng)選擇（使用flash還是h5）。

框架和庫(kù)上，還是選擇主要使用nej框架，nej提供了很豐富的方法。對(duì)外暴露的類使用regular實(shí)現(xiàn)，因?yàn)榻逃a(chǎn)品前端組件和業(yè)務(wù)工程大部分是使用regular的，在使用上會(huì)很方便。另外在移動(dòng)端上選用了flexible方案，因?yàn)榻逃a(chǎn)品的web頁(yè)適配已經(jīng)統(tǒng)一使用flexible了，手勢(shì)事件的處理選用了

為了方便擴(kuò)展和添加組件，使用了觀察者模式。觀察者模式在視頻播放器這樣規(guī)模的工程中使用非常合適，也是屢試不爽的一種設(shè)計(jì)模式。我直接參考了flex中類似的實(shí)現(xiàn)，使用js寫(xiě)了一遍（當(dāng)然自己寫(xiě)也很快）。

   ![][1]

圖如上所示，component基類和componentContainer單例類實(shí)現(xiàn)了觀察者模式，所有組件都繼承自component類，component實(shí)例中可以調(diào)用方法發(fā)送notification對(duì)象進(jìn)行組件之間的通信，notification的調(diào)度則在componentContainer中實(shí)現(xiàn)了。這些組件分為必須組件和可選組件，必須組件包括：視頻對(duì)象組件（movieData）、視頻播放組件（mainVideo）、api組件等，可選組件則是根據(jù)不同產(chǎn)品的業(yè)務(wù)需求來(lái)開(kāi)發(fā)的，可以通過(guò)不同組件列表的配置來(lái)自定義播放器的具體功能，這個(gè)也是在componentContainer實(shí)現(xiàn)。Html5VideoMedia則是對(duì)HTMLVideoElement的封裝，它不作為一個(gè)組件，只是提供視頻播放的功能，以及定義了相關(guān)的事件，使用Html5VideoMedia的除了視頻播放組件，還可以是片頭廣告組件。

適配方面，樣式上的適配使用了flexible的方案。有的組件比較復(fù)雜，比如控制條，在web端和移動(dòng)端功能差別很大，樣式差別也很大，可以考慮不同平臺(tái)使用不同組件（圖中可以看到control和controlMobile），邏輯上會(huì)很清晰，不用寫(xiě)很多的if和else，不過(guò)因?yàn)檫@樣要依賴更多的組件，js和css文件會(huì)更大一些。個(gè)人覺(jué)得為了提高代碼的可維護(hù)性，犧牲部分的文件大小也是可取的。

hls直播的一些特點(diǎn)

直播狀態(tài)的判斷。其實(shí)直播功能跟業(yè)務(wù)的關(guān)聯(lián)是很大的，這里的直播狀態(tài)也是只業(yè)務(wù)中的狀態(tài)，比如：未開(kāi)始、即將開(kāi)始、直播中、直播結(jié)束等等。我們產(chǎn)品中目前還是使用前端輪詢的方式更新直播的狀態(tài)，有一點(diǎn)要提的是hls流是不會(huì)觸發(fā)end事件的，所以h5直播的狀態(tài)其實(shí)是完全靠輪詢來(lái)控制的。

如何判斷流異常。一般網(wǎng)絡(luò)問(wèn)題或者是源問(wèn)題的處理可以監(jiān)聽(tīng)video標(biāo)簽和source標(biāo)簽的error事件，兩種標(biāo)簽都需要監(jiān)聽(tīng)。但是error觸發(fā)時(shí)的錯(cuò)誤信息有時(shí)候并不信息，或者說(shuō)不同瀏覽器實(shí)現(xiàn)上不一樣，之前有碰到過(guò)改變currentTime屬性來(lái)seek，偶爾會(huì)觸發(fā)error事件，但是error中只說(shuō)了是網(wǎng)絡(luò)錯(cuò)誤，沒(méi)有任何其他信息，在對(duì)比了其他視頻后才確定是某個(gè)視頻轉(zhuǎn)碼的問(wèn)題，確實(shí)十分的蛋疼。在直播流播放過(guò)程中，偶爾會(huì)出現(xiàn)流異常的情況，流異常一般會(huì)表現(xiàn)為畫(huà)面卡死，不一定觸發(fā)error事件。我參考了之前青果同事的方案：每隔一段時(shí)間檢查currentTime，如果在播放狀態(tài)下currentTime在這段時(shí)間內(nèi)未改變，很可能就是流異常了，則主動(dòng)重新加載。

3.一些目前無(wú)法解決的問(wèn)題

ios上視頻相關(guān)的問(wèn)題很多，因?yàn)橄到y(tǒng)的限制太多了。稍微列一下：

同時(shí)只能播放一個(gè)視頻或者音頻，只允許一個(gè)video或者audio標(biāo)簽。做片頭廣告功能會(huì)麻煩一點(diǎn)。

ios版本較低的Safari中播放視頻會(huì)強(qiáng)制全屏，ios 10中可以使用playsinline。在微信和一些定制的webkit中可以添加webkit-playsinline解決。

在沒(méi)有人為操作的情況下，無(wú)法實(shí)現(xiàn)進(jìn)入頁(yè)面自動(dòng)開(kāi)始播放視頻

ios中無(wú)法使用js控制video音量，只能由物理按鍵控制。在ios中你可以直接隱藏音量控制功能了。。。

還有截屏的問(wèn)題，不過(guò)產(chǎn)品中沒(méi)有使用到就暫時(shí)沒(méi)有調(diào)研。

android上的問(wèn)題也很多，主要是因?yàn)閍ndroid版本太多、機(jī)型太多，各方面參差不齊。稍微列一下：

部分android系統(tǒng)會(huì)直接替換video標(biāo)簽，使用系統(tǒng)播放器播放，常見(jiàn)于國(guó)產(chǎn)手機(jī)

canPlayType方法檢測(cè)結(jié)果與實(shí)際不符，這個(gè)問(wèn)題在開(kāi)發(fā)過(guò)程中遇到過(guò)，例如在一部華碩手機(jī)上檢測(cè)到不支持m3u8播放，但是實(shí)際卻可以播放，原本想放開(kāi)這個(gè)限制的，后來(lái)發(fā)現(xiàn)在云課堂app的webview中強(qiáng)制播放可能會(huì)導(dǎo)致app崩潰，所以最后還是加上了檢測(cè)。。

不支持m3u8播放的android一般是android4.0左右及以下的

網(wǎng)易云免費(fèi)體驗(yàn)館，0成本體驗(yàn)20+款云產(chǎn)品！

更多網(wǎng)易技術(shù)、產(chǎn)品、運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)點(diǎn)擊。

文章來(lái)源： 網(wǎng)易云社區(qū)