移動端視頻播放

時間 2019-11-16

標籤移動端視播放欄目無線简体版

原文原文鏈接

HTML5 <video> 的出現，爲瀏覽器中的視頻播放帶來了很大的進步，PC 端上表現很好，看看 Youtube 的 H5 播放器就知道了，但在移動端卻有各類各樣的限制，本篇便是實戰以後的小結，主要講講那些和 PC 端不一樣的地方，若是其中有錯誤的地方，歡迎指正。html

自動播放

蘋果出於流量損耗的考慮，禁止了那些非用戶輸入觸發的播放動做，這意味着給 video 標籤增長 preload 及 autoplay 屬性都是無效的，而且也沒法使用 JS 的 play() 和 load()方法來播放和加載視頻，除非是用戶手動觸發。前端

audio 音頻播放一樣適用上面的規則。html5

如下是官方說明：web

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()"event does not.瀏覽器

舉個栗子，這樣能夠播放（有用戶輸入）：網絡

<video id="myMovie"></video>
<input type="button" value="Play" onclick="document.myMovie.play()">

這樣則不行（沒有用戶輸入）：app

<body onload="document.myMovie.play()">

其實若是蘋果只是出於流量上的考慮，徹底能夠換種思路，在非 WI-FI 網絡下這種考慮是合理的，但在 WI-FI 網絡下應該放開 preload 和 autoplay 的功能。less

不過從產品設計上來講，自動播放並非一個好的體驗，不到萬不得已應儘可能避免使用。ide

安卓基本上面臨着和 IOS 同樣的問題，限於測試機數量，只測了少部分機型，而在海量的安卓機型之中，不排除有些廠商會經過修改底層規則來支持視頻自動播放。測試

全屏問題

IOS 上播放即會自動全屏，因此不存在此問題，而且全屏以後自帶前進、後退、播放/暫停、時間進度等功能，徹底不用操心。

安卓機型支持不一，測試過程用到的華爲 G7-TL00、聯想 K3 Note、三星 Note 二、小米 3 不支持（詭異的是紅米 Note 卻支持，大概是 MIUI 版本不一致，規則有變化）

解決辦法，能夠針對安卓和 IOS 作不一樣策略，安卓環境下，點擊播放時跳到單獨頁面播放視頻，這也是咱們目前用的解決方案。

crash 問題

在應用的 H5 容器環境中，在 HTML 代碼中直接放置 video 或 audio 標籤可能會有必定機率致使應用 crash，解決方案是動態建立 video 或 audio 來改善或避免此問題。

以上問題和所使用的瀏覽器有關係，若是是在 app 的 webview 窗口中，則和 app 使用的瀏覽器內核有關，通常來講，上面所列只針對使用默認瀏覽器內核。

H5 播放器組件

若是在移動端開發中要用到視頻播放，不建議使用原生方式來寫，除非是如下兩種狀況：

很是瞭解各類遊戲規則和兼容差別
項目只須要支持 IOS

除此以外，建議使用專門的播放器組件，組件通常封裝了不少的兼容差別性，不必去重複造輪子，把時間花在業務邏輯實現上便可。

這裏推薦兩款：

PrismPlayer

這是淘寶某前端團隊作的一個組件，能夠很方便地定製播放器的功能，有專人維護，推薦使用。

Video.js

優秀的開源播放器組件，歷史「悠久」，Star 過萬，配置豐富，各類細節作得很到位。

以上兩款組件都支持 flash 和 video 方案，移動端使用 video 方式，因爲不用加載插件，速度會比 flash 提升很多。

其餘

<video> 支持 MP4, WebM, Ogg 三種視頻格式，其中 MP4 格式支持最好，視頻建議使用 H.264 編碼，若是想要更好的兼容性，能夠把這 3 種格式視頻都製做好，用如下方式引用：

<video>
 <source src="http://example.com/xxx.mp4" type='video/mp4' />
 <source src="http://example.com/xxx.webm" type='video/webm' />
 <source src="http://example.com/xxx.ogv" type='video/ogg' />
<video>

關於視頻格式，阮一峯老師早些年還翻譯過一篇文章 HTML5的視頻格式之爭，很是有意思，對了解這其中的淵源也頗有幫助。

視頻大小理論上沒有限制，但考慮到移動端特色，視頻大小與時長應儘可能壓縮。