HTML5 video標籤支持狀況分析

1. 什麼狀況下可使用HTML5播放？ 要支持HTML5播放，瀏覽器必須同時知足兩個條件：
2. 瀏覽器能解析HTML5標準的Video標籤。
3. 瀏覽器能對H.264編碼的視頻作解碼。

咱們再來細細的說一說這個問題，咱們先來解釋下什麼是HTML5。HTML5是用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML（標準通用標記語言下的一個應用）標準版本；如今仍處於發展階段，但大部分瀏覽器已經支持某些 HTML5 技術。HTML5播放視頻，使用的是HTML5標準裏的 video 標籤，基本用法查看這裏，更高級的接口定義請參閱W3C規範文檔。 因爲Video是HTML5規範裏新增的標籤，那麼必定要瀏覽器能解析Video標籤，不然確定沒法使用HTML5。

那麼單單能解析HTML5的Video標籤是否就能這個正常播放呢？視頻是通過編碼的，編碼格式是H.264視頻格式。所謂編碼，其實就是一種壓縮算法，要壓縮，那麼必定要解壓縮，視頻格式的解壓縮就是解碼，若是瀏覽器自己沒法對視頻文件進行解碼，那麼一樣播放不出來。

因此綜上，視頻播放必需要知足上述兩個條件，缺一不可。

1. 爲何有些安卓手機沒法播放視頻？ 首先，要解答這個問題，請先看問題1。

看過問題1，咱們知道安卓播放跟廠商支持狀況有關，其實前端JS這邊對VIDEO標籤的解析和H264的解碼作不了什麼實質的事情，咱們只能儘可能使用html5的API接口找到hack各類設備的方案，但關鍵仍是看廠商支持狀況，因此要在前端實現適配難度很大。

安卓因爲嚴重的系統碎片化問題，致使不一樣的廠商、不一樣的瀏覽器對上述兩種條件的支持各不相同，因此安卓無法簡單的說究竟是否支持HTML5播放，甚至同一個廠商的不一樣機型，其特色都不同，咱們遇到過單獨支持flash的，單獨支持html5的，或者兩者都支持的，甚至還有都不支持的，另外還有明明實際上能使用HTML5播放但API又返回說不支持播放的。對此咱們針對不一樣的Android設備和瀏覽器作了些矯正和強制判斷，許多問題須要Case by Case去解決。

1. 對於HTML5和flash都不支持的安卓，咱們怎麼辦？ 問題1裏咱們說過，安卓設備上咱們遇到過單獨支持flash的，單獨支持html5的，或者兩者都支持的。但基於web的視頻播放無非就這兩種功能方案，若是都不支持怎麼辦？

其實還有個方案，就是MP4連接的形式，咱們稱之爲MP4Link?，以下圖：

  

這個看起來像個播放器，其實咱們只是在播放區域放了一張長得像播放器的靜態圖片，在圖片上咱們設置了連接，指向到視頻MP4文件，用戶點擊」播放按鈕「（實際點擊的是圖片連接），觸發瀏覽器自己的特性，會自動打開MP4文件，這個時候有些瀏覽器會自動調用設備默認的視頻播放器，或者會問用戶，當前是要下載仍是要播放。

咱們已知的一些播放問題

設備和瀏覽器	現象	解決方案
小米1 & 小米2（MIUI V5系統）	系統自帶的瀏覽器API返回不支持H.264，但實際上點擊能夠進入全屏，MIUI本身拉起系統播放器播放視頻	矯正爲使用HTML5
三星系列，主要是Note2，S3等	系統自帶的瀏覽器API返回不支持H.264，但實際上能夠播放	矯正爲使用HTML5
QQ手機瀏覽器	點擊播放之後強制使用瀏覽器自帶的皮膚，沒法使用騰訊視頻用CSS3製做的皮膚	QQ瀏覽器的皮膚外觀和體驗都還不錯，能夠接受該體驗
微信4.\*版本運行在安卓4.0+的系統	播放沒法全屏，點擊全屏沒反應	建議升級到微信5.0+，微信自身未針對安卓4.0作播放適配，未實現安卓4.0要求的全屏API
微信5.0+版本運行在MIUI系統	機率性出現點擊沒法播放，點擊全屏按鈕之後便可播放	前端邏輯作了hack處理，針對微信for安卓，點擊視頻之後自動全屏播放（體驗有點仿iPhone）
騰訊微博 Android版	安卓4.0+機率性出現視頻能夠播放，但不顯示畫面，安卓2.3.\*沒法拉起flash，同時也不支持HTML5	正在跟微博跟進中
微信4.\*版本在安卓4.0+系統	播放視頻點全屏按鈕無效	安卓4.0開始全屏功能須要APP響應安卓的系統接口才有效，而微信4.\*版本並未實現該接口，微信在5.0纔開始支持，可使用僞全屏解決，詳見問題9
微信5.0版本在搭載MIUIV5的小米1手機上	全屏之後會花屏	微信內部邏輯處理問題，可使用僞全屏解決，詳見問題9

 

 

 

 

 

統一播放器是如何選擇當前設備應該用什麼內核的播放器呢？ 統一播放器在移動設備的判斷流程以下圖： 

iOS設備除Mac系統之外都在html5 PC設備，含Mac系統都走flash Android設備低於4.0都走flash Android4.0以上系統會作些矯正，QQ手機瀏覽器3.×版本和Firefox瀏覽器使用MP4連接。微信4.2以上版本、MIUI原生瀏覽器實際是支持HTML5但JS API返回不支持，這裏作了矯正強制使用HTML5。其餘瀏覽器根據canPlayType接口判斷是否支持H.264解碼，支持則使用HTML5，不然使用Flash.

移動設備能在網頁裏播放直播嗎？ ios的HTML5直播是使用HLS技術，該技術只有ios系統才支持，因此用chrome、safari修改userAgent模擬是看不到效果的，可能會黑屏。 安卓手機基本不支持HLS，則只能使用flash播放直播，若是您使用的安卓設備不支持flash（能安裝flash跟支持flash是兩回事），則沒法播放直播節目。

那麼對於安卓這個問題該怎麼解決？好消息是，安卓的手機QQ瀏覽器4.2版本開始原生支持HLS，使用手機QQ瀏覽器就能播放直播，遇到這個問題，咱們建議是引導用戶使用手機QQ瀏覽器。那麼若是你是本身App裏內嵌WebView?，但願支持直播，那麼要麼搞定flash，要麼搞定HLS，或者直接找wwjs要騰訊視頻適合安卓的SDK開發包。

1. 移動設備播放能作到自動播放嗎？ 因爲移動設備系統的限制，在打開一個網頁之後，必需要用戶手動物理點擊一次才能自動播放，並且在點擊一次之後，再播放其餘視頻，就能夠作到自動播放不須要再點擊了。

那有沒有辦法突破呢？通過咱們測試，部分iPhone設備，能夠先調用video.pause()，而後再調用video.play()接口能夠實現自動播放，但僅僅是部分設備有效，並且是一樣的機型、一樣的系統版本、一樣的設置，有些機器能夠有些無效，初步估計可能跟越獄有關，但還不徹底確認。

安卓設備上目前還沒發現能夠自動播放的狀況。

若是你不是在普通瀏覽器上使用統一播放器，而是本身的webview，那麼其實能夠在調用webview的時候設置幾個屬性，就能夠打開視頻的自動播放功能：

uiWebView.allowsInlineMediaPlayback = YES;

uiWebView.mediaPlaybackRequiresUserAction = NO;

微信是已經實現了自動播放接口，但須要根據域名申請權限，默認是禁止的，申請權限請聯繫微信的同窗。

移動設備能經過接口調整音量嗎？ 這個系統限制了，不能經過接口去修改音量，移動設備其實用戶很方便的使用手機側面調整音量大小。 爲此，apple對限制接口作過解釋：https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

系統全屏和僞全屏的區別和使用場景 首先，先明確下系統全屏和僞全屏的區別。

	系統全屏	僞全屏
定義	在點擊視頻全屏的時候，調用瀏覽器遵循HTML5的全屏API，將播放器佔滿整個屏幕	點擊全屏時，經過頁面的DOM元素和樣式修改播放器的尺寸，讓播放器撐大到當前頁面的100%寬度或者高度
截圖示例
差別描述	控制欄和播放界面使用瀏覽器或者系統的樣式，前端不可修改，也不能增長或刪減元素，沒法控制其表現	視頻文件播放解析是瀏覽器或系統，控制欄和播放界面使用本身經過CSS設計的樣式，能夠新增或刪減元素，能看到瀏覽器的標題欄和底部的控制欄

爲何有僞全屏的場景？有如下幾個緣由： 1. 系統全屏沒法知足需求，好比須要在全屏的時候展現視頻標題、App下載按鈕、清晰度切換等 2. 規避系統全屏的bug，咱們已知有以下幾個場景：

設備	現象	緣由
微信4.\*版本在安卓4.0+系統	播放視頻點全屏按鈕無效	安卓4.0開始全屏功能須要APP響應安卓的系統接口才有效，而微信4.\*版本並未實現該接口，微信在5.0纔開始支持
微信5.0版本在搭載MIUIV5的小米1手機上	全屏之後會花屏	微信內部邏輯處理問題

可能還有咱們未知的全屏問題，因此爲了規避系統全屏的bug，咱們能夠僞全屏的形式實現。

那麼是否是任何場景或者設備都能實現僞全屏呢？

設備或系統	是否可以使用僞全屏
安卓4.0	√ 可使用僞全屏
iPad	√ 可使用僞全屏
iPhone、iPod Touch	× 因爲系統限制，播放視頻自動進入系統全屏，因此沒法使用僞全屏

網頁要使用僞全屏要作什麼工做？ 僞全屏，本質是用CSS修改播放器的width、height、left、top、zindex、position等樣式參數，那麼天然可能會影響網頁其餘元素的展示，也會受到網頁元素的影響，例如會被網頁裏更高層級的div遮擋，收到body或者父容器的margin padding等影響。播放器自己的邏輯只能放大播放器，對於頁面元素是否要作些調整（好比將遮擋播放器的元素暫時隱藏）就須要頁面響應播放器的onfullscreen事件來寫一些頁面邏輯的代碼作配合了。

2.

iPhone、iPod全屏播放樣式能修改嗎？ iPhone、iPad播放視頻是使用的系統全屏，見問題9的詳細說明，系統全屏是系統接管，是調用的系統播放器實現的播放，因此前端不能修改其樣式和表現。