隨著 HTML5 的普及，越來(lái)越多視頻網(wǎng)站使用 <video></video> 標(biāo)簽播放直播、點(diǎn)播內(nèi)容（如下圖所示）。使用 <video> 的好處，主要以下兩點(diǎn)。

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

盡管有以上好處，但是舊有的點(diǎn)解鏈接調(diào)用外部播放器打開視頻的功能還是有其價(jià)值的，因?yàn)?#xff1a;

• HTML5 Video 兼容性問(wèn)題，對(duì) <video> 不一定完整支持。這時(shí)，調(diào)用外部播放器作為一種向下兼容（fallback/polyfills）方案出現(xiàn)，在不支持的情況下，提示用戶選擇。
• 提示使用客戶端打開（引導(dǎo)用戶使用客戶端）。

播放器功能

HTML5 播放器是頁(yè)面的播放器，通過(guò)瀏覽器提供的接口調(diào)用其功能。相當(dāng)于客戶端封裝的播放器而言頁(yè)面播放器的功能不算強(qiáng)大，但基本的播放需求還是可以滿足的。

• width/height：高度、寬度，可設(shè)置百分比的相對(duì)單位進(jìn)行頁(yè)面自適應(yīng)，兼容橫、豎屏幕的切換。
• poster：設(shè)置視頻封面，可設(shè)置海報(bào)或截圖（不過(guò)圖片尺寸不好控制）。
• autoplay/preload: 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。對(duì)于免費(fèi)的內(nèi)容。可以立刻播放。否則用戶點(diǎn)擊了播放就跳到“訂購(gòu)”。如果自動(dòng)播放會(huì)占用用戶的流量 。
• loop： 如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。
• controls：如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕、全屏。如果需要自定義播放器樣式，可以設(shè)置該屬性不去顯示默認(rèn)控件。利用瀏覽器 JavaScript 接口實(shí)現(xiàn)相應(yīng)的功能。

<video> 元素提供的方法如下（參見(jiàn)W3C School）。

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

兼容性測(cè)試

關(guān)于瀏覽器自帶播放器的兼容問(wèn)題，詳細(xì)可參見(jiàn)《基于web網(wǎng)頁(yè)視頻播放常見(jiàn)問(wèn)題》,文中分析主要的原因如下。

為什么有些安卓手機(jī)無(wú)法播放視頻？ ……我們知道安卓播放跟廠商支持情況有關(guān)，其實(shí)前端 JS 這邊對(duì) <video> 標(biāo)簽的解析和 H264 的解碼做不了什么實(shí)質(zhì)的事情，我們只能盡量使用 HTML5 的 API 接口找到 hack 各種設(shè)備的方案，但關(guān)鍵還是看廠商支持情況，所以要在前端實(shí)現(xiàn)適配難度很大。
……
安卓由于嚴(yán)重的系統(tǒng)碎片化問(wèn)題，導(dǎo)致不同的廠商、不同的瀏覽器對(duì)上述兩種條件的支持各不相同，所以安卓沒(méi)法簡(jiǎn)單的說(shuō)到底是否支持 HTML5 播放，甚至同一個(gè)廠商的不同機(jī)型，其特點(diǎn)都不一樣，我們遇到過(guò)單獨(dú)支持 flash 的，單獨(dú)支持 html5 的，或者二者都支持的，甚至還有都不支持的，另外還有明明實(shí)際上能使用 HTML5 播放但 API 又返回說(shuō)不支持播放的。對(duì)此我們針對(duì)不同的 Android 設(shè)備和瀏覽器做了些矯正和強(qiáng)制判斷，許多問(wèn)題需要 Case by Case 去解決。

當(dāng)前我們不但希望使用 <video> 播放，而且需要可以半屏內(nèi)區(qū)域播放，最好還是在不修改源情下進(jìn)行。首先我測(cè)試結(jié)果如下表。

機(jī)型	是否支持區(qū)域播放	直播格式		點(diǎn)播格式
視頻格式		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	?

這里根據(jù)上表，嘗試總結(jié)如下幾個(gè)方面。

視頻格式方面：一般安卓機(jī)型都支持 rtsp 格式，而m3u8 的話 Android 3.0 以后都支持。m3u8 是蘋果推薦的格式，所以 iOS 都支持。點(diǎn)播的話，mp4 一般都支持（H264壓縮算法）。

關(guān)于區(qū)域內(nèi)播放視頻，Android 2.2 不支持， Android 2.3 以后的版本支持。iPad 可以區(qū)域播放 iPhone 卻不行。iPhone 有一種情況可以區(qū)域播放，就是在 Webview 中打開這個(gè)特性，僅限應(yīng)用內(nèi)的 Webview 使用，——這也就是朋友圈能夠區(qū)域播放的原因。

對(duì)于實(shí)在不支持 <video> 的瀏覽器，可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標(biāo)簽的信息。

一般來(lái)講，Android 版本越高，問(wèn)題越少。即使瀏覽器可以使用 <video> 播放，在細(xì)節(jié)上也會(huì)遇到各種問(wèn)題。下面具體說(shuō)明。

具體障礙

以上討論的是瀏覽器自帶瀏覽器。實(shí)際使用過(guò)程中，使用國(guó)產(chǎn)的第三方 Webkit瀏覽器可能性會(huì)大一些，例如 UC、QQ瀏覽器等等——因此又可以把兼容性問(wèn)題劃分為自帶瀏覽器的和第三方瀏覽器的。開發(fā)過(guò)程中遇到的具體如下。

• • 渲染問(wèn)題，例如 QQ 瀏覽器，直播播放器播放時(shí)滾動(dòng)會(huì)遮蓋導(dǎo)航，UC 瀏覽器 <video>標(biāo)簽總是在前，設(shè)置 z-index 無(wú)效。
  • 華為機(jī)器不能播放標(biāo)清內(nèi)容（RTSP 流）
  • QQ X5 內(nèi)核瀏覽器需要直接寫 m3u8，不能跳轉(zhuǎn)方式指定。
  • 小米1 video 標(biāo)簽失效（Android 4.1 默認(rèn)瀏覽器），屬于兼容性問(wèn)題。
  • 播放源地址，如果經(jīng)過(guò) HTTP 302 重定向跳轉(zhuǎn)的話，低于 Android 4.4 的機(jī)器可能不能最終獲取 m3u8/mp3/3gp 源地址。尤其對(duì)于直播的地址，因?yàn)樾枰b權(quán)、獲取手機(jī)號(hào)碼等流程，中間需要經(jīng)過(guò)多次跳轉(zhuǎn)，所以舊版的瀏覽器就不能播放了1。試比較以下 HTML 代碼的寫法： [html]?view plain?copy ?
  • <!--?通過(guò)?jsp?返回?m3u8?地址，這是間接的方式?-->??
  • <video?src="http://server/getLive.jsp"/>??
  • <!--?直接寫出?m3u8?地址?-->??
  • <video?src="http://server/live.m3u8"/>???

  對(duì)此，我們暫時(shí)暴露最終源地址給前端 <video> 標(biāo)簽。不過(guò)這樣帶來(lái)潛在的一個(gè)問(wèn)題（見(jiàn)下一點(diǎn)）。

  • 因?yàn)樵吹刂分苯颖┞读?#xff0c;所以對(duì)防盜鏈方面來(lái)說(shuō)是有害而無(wú)利的。之所以之前的跳轉(zhuǎn)獲取源地址相對(duì)是安全點(diǎn)的，是因?yàn)槟谦@取過(guò)程是間接的。——當(dāng)然無(wú)論間接還是直接，終端還是曉得源地址的。
  • poster="img.jpg" 設(shè)置圖片，不能 100% 自適應(yīng)寬度。進(jìn)而使用 video.background CSS 屬性，但會(huì)有播放時(shí)背景不會(huì)消失的問(wèn)題（Android 上）
  • iOS 7 Safari 不能使用 onclick 登記單擊事件； iOS 8 無(wú)此問(wèn)題
  • iOS 8 下如果設(shè)置播放源 src="" 為空的話，會(huì)向用戶提示“不可播放”的圖標(biāo)；iOS 7 不會(huì)。這個(gè)情況是說(shuō)用戶沒(méi)有權(quán)限播放的時(shí)候才會(huì)設(shè)置 src=“”。
  • 綜上三點(diǎn)問(wèn)題所述，采用一層 <img /> 遮罩的做法，播放的時(shí)候才顯示 video 標(biāo)簽。這步需要相關(guān)的? JavaScript 的編碼。

轉(zhuǎn)載于:https://www.cnblogs.com/wt695742319/p/5273168.html

總結(jié)

以上是生活随笔為你收集整理的HTML5 播放器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。