隨著 HTML5 的普及，越來越多視訊網站使用 <video></video> 標籤播放直播、點播內容（如下圖所示）。使用 <video> 的好處，主要以下兩點。

• 可以直接在頁面中播放，也就是所謂的“區域播放”，上半屏是視訊播放，下半屏是其他內容，可以一邊播放，一邊看其他內容。
• 某些應用如微信朋友圈的 Webview 限制外部開啟視訊，這樣要在微信推廣的話，區域播放就迫切需要了。

儘管有以上好處，但是舊有的點解連結呼叫外部播放器開啟視訊的功能還是有其價值的，因為：

• HTML5 Video 相容性問題，對 <video> 不一定完整支援。這時，呼叫外部播放器作為一種向下相容（fallback/polyfills）方案出現，在不支援的情況下，提示使用者選擇。
• 提示使用客戶端開啟（引導使用者使用客戶端）。

播放器功能

HTML5 播放器是頁面的播放器，通過瀏覽器提供的介面呼叫其功能。相當於客戶端封裝的播放器而言頁面播放器的功能不算強大，但基本的播放需求還是可以滿足的。

• width/height：高度、寬度，可設定百分比的相對單位進行頁面自適應，相容橫、豎螢幕的切換。
• poster：設定視訊封面，可設定海報或截圖（不過圖片尺寸不好控制）。
• autoplay/preload: 如果出現該屬性，則視訊在就緒後馬上播放。對於免費的內容。可以立刻播放。否則使用者點選了播放就跳到“訂購”。如果自動播放會佔用使用者的流量 。
• loop： 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。
• controls：如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕、全屏。如果需要自定義播放器樣式，可以設定該屬性不去顯示預設控制元件。利用瀏覽器 JavaScript 介面實現相應的功能。

<video> 元素提供的方法如下（參見W3C School）。

<video> 元素提供的屬性如下。
<video> 元素提供的事件如下。

相容性測試

關於瀏覽器自帶播放器的相容問題，詳細可參見《基於web網頁視訊播放常見問題》,文中分析主要的原因如下。

為什麼有些安卓手機無法播放視訊？ ……我們知道安卓播放跟廠商支援情況有關，其實前端 JS 這邊對 <video> 標籤的解析和 H264 的解碼做不了什麼實質的事情，我們只能儘量使用 HTML5 的 API 介面找到 hack 各種裝置的方案，但關鍵還是看廠商支援情況，所以要在前端實現適配難度很大。
……
安卓由於嚴重的系統碎片化問題，導致不同的廠商、不同的瀏覽器對上述兩種條件的支援各不相同，所以安卓沒法簡單的說到底是否支援 HTML5 播放，甚至同一個廠商的不同機型，其特點都不一樣，我們遇到過單獨支援 flash 的，單獨支援 html5 的，或者二者都支援的，甚至還有都不支援的，另外還有明明實際上能使用 HTML5 播放但 API 又返回說不支援播放的。對此我們針對不同的 Android 裝置和瀏覽器做了些矯正和強制判斷，許多問題需要 Case by Case 去解決。

當前我們不但希望使用 <video> 播放，而且需要可以半屏內區域播放，最好還是在不修改源情下進行。首先我測試結果如下表。

這裡根據上表，嘗試總結如下幾個方面。

1. 視訊格式方面：一般安卓機型都支援 rtsp 格式，而m3u8 的話 Android 3.0 以後都支援。m3u8 是蘋果推薦的格式，所以 iOS 都支援。點播的話，mp4 一般都支援（H264壓縮演算法）。
2. 關於區域內播放視訊，Android 2.2 不支援， Android 2.3 以後的版本支援。iPad 可以區域播放 iPhone 卻不行。iPhone 有一種情況可以區域播放，就是在 Webview 中開啟這個特性，僅限應用內的 Webview 使用，——這也就是朋友圈能夠區域播放的原因。
3. 對於實在不支援 <video> 的瀏覽器，可以在開始標籤和結束標籤之間放置文字內容，這樣老的瀏覽器就可以顯示出不支援該標籤的資訊。

一般來講，Android 版本越高，問題越少。即使瀏覽器可以使用 <video> 播放，在細節上也會遇到各種問題。下面具體說明。

具體障礙

以上討論的是瀏覽器自帶瀏覽器。實際使用過程中，使用國產的第三方 Webkit瀏覽器可能性會大一些，例如 UC、QQ瀏覽器等等——因此又可以把相容性問題劃分為自帶瀏覽器的和第三方瀏覽器的。開發過程中遇到的具體如下。

• 渲染問題，例如 QQ 瀏覽器，直播播放器播放時滾動會遮蓋導航，UC 瀏覽器 <video>標籤總是在前，設定 z-index 無效。
• 華為機器不能播放標清內容（RTSP 流）
• QQ X5 核心瀏覽器需要直接寫 m3u8，不能跳轉方式指定。
  
• 小米1 video 標籤失效（Android 4.1 預設瀏覽器），屬於相容性問題。
• 播放源地址，如果經過 HTTP 302 重定向跳轉的話，低於 Android 4.4 的機器可能不能最終獲取 m3u8/mp3/3gp 源地址。尤其對於直播的地址，因為需要鑑權、獲取手機號碼等流程，中間需要經過多次跳轉，所以舊版的瀏覽器就不能播放了1。試比較以下 HTML 程式碼的寫法：

  <!-- 通過 jsp 返回 m3u8 地址，這是間接的方式 -->
  <video src="http://server/getLive.jsp"/>
  <!-- 直接寫出 m3u8 地址 -->
  <video src="http://server/live.m3u8"/> 

  對此，我們暫時暴露最終源地址給前端 <video> 標籤。不過這樣帶來潛在的一個問題（見下一點）。

• 因為源地址直接暴露了，所以對防盜鏈方面來說是有害而無利的。之所以之前的跳轉獲取源地址相對是安全點的，是因為那獲取過程是間接的。——當然無論間接還是直接，終端還是曉得源地址的。
• poster="img.jpg" 設定圖片，不能 100% 自適應寬度。進而使用 video.background CSS 屬性，但會有播放時背景不會消失的問題（Android 上）
  
• iOS 7 Safari 不能使用 onclick 登記單擊事件； iOS 8 無此問題
  
• iOS 8 下如果設定播放源 src="" 為空的話，會向用戶提示“不可播放”的圖示；iOS 7 不會。這個情況是說使用者沒有許可權播放的時候才會設定 src=“”。
  
• 綜上三點問題所述，採用一層 <img /> 遮罩的做法，播放的時候才顯示 video 標籤。這步需要相關的  JavaScript 的編碼。