摘要：此文已由作者吳家聯授權網易云社區發布。歡迎訪問網易云社區，了解更多網易技術產品運營經驗。播放器的設計思路重構后應該包含這些功能支持點播非加密的和直播播放兼容適配移動端根據平臺自動選擇使用還是。直播的一些特點直播狀態的判斷。

此文已由作者吳家聯授權網易云社區發布。

歡迎訪問網易云社區，了解更多網易技術產品運營經驗。

去年年中的時候，借著產品改版的機會，將之前的h5播放器好好整理重構了一番。之前的h5播放器較為簡陋，有幾個大問題：沒有適配移動端（最大的不足）、沒有提供直播模式、有一些歷史遺留的bug沒有修復。重構版除了解決了這幾個大問題外，還做了很多的優化。加上與flash播放器的結合和近期飛哥主導的教育產品組件標準化，播放器適用性變得更強更通用了。

h5播放器的設計思路?

重構后應該包含這些功能：支持點播（非加密的MP4）和直播播放（m3u8）、兼容（適配）移動端、根據平臺自動選擇（使用flash還是h5）。

框架和庫上，還是選擇主要使用nej框架，nej提供了很豐富的方法。對外暴露的類使用regular實現，因為教育產品前端組件和業務工程大部分是使用regular的，在使用上會很方便。另外在移動端上選用了flexible方案，因為教育產品的web頁適配已經統一使用flexible了，手勢事件的處理選用了

為了方便擴展和添加組件，使用了觀察者模式。觀察者模式在視頻播放器這樣規模的工程中使用非常合適，也是屢試不爽的一種設計模式。我直接參考了flex中類似的實現，使用js寫了一遍（當然自己寫也很快）。

   ![][1]

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

適配方面，樣式上的適配使用了flexible的方案。有的組件比較復雜，比如控制條，在web端和移動端功能差別很大，樣式差別也很大，可以考慮不同平臺使用不同組件（圖中可以看到control和controlMobile），邏輯上會很清晰，不用寫很多的if和else，不過因為這樣要依賴更多的組件，js和css文件會更大一些。個人覺得為了提高代碼的可維護性，犧牲部分的文件大小也是可取的。

hls直播的一些特點

直播狀態的判斷。其實直播功能跟業務的關聯是很大的，這里的直播狀態也是只業務中的狀態，比如：未開始、即將開始、直播中、直播結束等等。我們產品中目前還是使用前端輪詢的方式更新直播的狀態，有一點要提的是hls流是不會觸發end事件的，所以h5直播的狀態其實是完全靠輪詢來控制的。

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

3.一些目前無法解決的問題

ios上視頻相關的問題很多，因為系統的限制太多了。稍微列一下：

同時只能播放一個視頻或者音頻，只允許一個video或者audio標簽。做片頭廣告功能會麻煩一點。

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

在沒有人為操作的情況下，無法實現進入頁面自動開始播放視頻

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

還有截屏的問題，不過產品中沒有使用到就暫時沒有調研。

android上的問題也很多，主要是因為android版本太多、機型太多，各方面參差不齊。稍微列一下：

部分android系統會直接替換video標簽，使用系統播放器播放，常見于國產手機

canPlayType方法檢測結果與實際不符，這個問題在開發過程中遇到過，例如在一部華碩手機上檢測到不支持m3u8播放，但是實際卻可以播放，原本想放開這個限制的，后來發現在云課堂app的webview中強制播放可能會導致app崩潰，所以最后還是加上了檢測。。

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

網易云免費體驗館，0成本體驗20+款云產品！

更多網易技術、產品、運營經驗分享請點擊。

文章來源： 網易云社區