HTML5 播放器
隨著 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> 播放，而且需要可以半屏內區域播放，最好還是在不修改源情下進行。首先我測試結果如下表。
| 機型 | 是否支持區域播放 | 直播格式 | 點播格式 | |||
| 視頻格式 | rtsp | m3u8 | 3gp | mp4 | ? | |
| Android?2.24 | No | Yes | No | Yes | Yes | ? |
| Android?2.35 | No | Yes | No | Yes | Yes | ? |
| Android?4.0 | Yes | Yes | Yes | Yes | Yes | ? |
| Android?4.1 | Yes | Yes | Yes | Yes | Yes | ? |
| Android?4.2 | Yes | Yes | Yes | Yes | Yes | ? |
| Android?4.3 | Yes | Yes | Yes | Yes | Yes | ? |
| Android?4.4 | Yes | Yes | Yes | Yes | Yes | ? |
| iOS 6 | No | No | Yes | Yes | Yes | ? |
| iOS 7 | No | No | Yes | Yes | Yes | ? |
| iOS 8 | No | No | Yes | Yes | Yes | ? |
| WP 867 | No | No | No | Yes | Yes | ? |
| WP 8.18 | Yes | No | No | Yes | Yes | ? |
這里根據上表，嘗試總結如下幾個方面。
一般來講，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 代碼的寫法： [html]?view plain?copy ?
- <!--?通過?jsp?返回?m3u8?地址，這是間接的方式?-->??
- <video?src="http://server/getLive.jsp"/>??
- <!--?直接寫出?m3u8?地址?-->??
- <video?src="http://server/live.m3u8"/>???
對此，我們暫時暴露最終源地址給前端 <video> 標簽。不過這樣帶來潛在的一個問題（見下一點）。
- 因為源地址直接暴露了，所以對防盜鏈方面來說是有害而無利的。之所以之前的跳轉獲取源地址相對是安全點的，是因為那獲取過程是間接的?！斎粺o論間接還是直接，終端還是曉得源地址的。
- poster="img.jpg" 設置圖片，不能 100% 自適應寬度。進而使用 video.background CSS 屬性，但會有播放時背景不會消失的問題（Android 上）
- iOS 7 Safari 不能使用 onclick 登記單擊事件； iOS 8 無此問題
- iOS 8 下如果設置播放源 src="" 為空的話，會向用戶提示“不可播放”的圖標；iOS 7 不會。這個情況是說用戶沒有權限播放的時候才會設置 src=“”。
- 綜上三點問題所述，采用一層 <img /> 遮罩的做法，播放的時候才顯示 video 標簽。這步需要相關的? JavaScript 的編碼。
轉載于:https://www.cnblogs.com/wt695742319/p/5273168.html
總結
- 上一篇： 专门讲讲这个MYSQL授权当中的with
- 下一篇： svn相关操作