- 什么情況下可以使用HTML5播放？ 要支持HTML5播放，瀏覽器必須同時滿足兩個條件：
- 瀏覽器能解析HTML5標准的Video標簽。
- 瀏覽器能對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，我們知道安卓播放跟廠商支持情況有關，其實前端JS這邊對VIDEO標簽的解析和H264的解碼做不了什么實質的事情，我們只能盡量使用html5的API接口找到hack各種設備的方案，但關鍵還是看廠商支持情況，所以要在前端實現適配難度很大。
安卓由於嚴重的系統碎片化問題，導致不同的廠商、不同的瀏覽器對上述兩種條件的支持各不相同，所以安卓沒法簡單的說到底是否支持HTML5播放，甚至同一個廠商的不同機型，其特點都不一樣，我們遇到過單獨支持flash的，單獨支持html5的，或者二者都支持的，甚至還有都不支持的，另外還有明明實際上能使用HTML5播放但API又返回說不支持播放的。對此我們針對不同的Android設備和瀏覽器做了些矯正和強制判斷，許多問題需要Case by Case去解決。
- 對於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開發包。
- 移動設備播放能做到自動播放嗎？ 由於移動設備系統的限制，在打開一個網頁以后，必須要用戶手動物理點擊一次才能自動播放，而且在點擊一次以后，再播放其他視頻，就可以做到自動播放不需要再點擊了。
那有沒有辦法突破呢？經過我們測試，部分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的詳細說明，系統全屏是系統接管，是調用的系統播放器實現的播放，所以前端不能修改其樣式和表現。