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

可以直接在頁面中播放，也就是所謂的“區(qū)域播放”，上半屏是視頻播放，下半屏是其他內(nèi)容，可以一邊播放，一邊看其他內(nèi)容。

某些應(yīng)用如微信朋友圈的 Webview 限制外部打開視頻，這樣要在微信推廣的話，區(qū)域播放就迫切需要了。

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

HTML5 Video 兼容性問題，對 不一定完整支持。這時，調(diào)用外部播放器作為一種向下兼容(fallback/polyfills)方案出現(xiàn)，在不支持的情況下，提示用戶選擇。

提示使用客戶端打開(引導(dǎo)用戶使用客戶端)。

播放器功能

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

width/height：高度、寬度，可設(shè)置百分比的相對單位進(jìn)行頁面自適應(yīng)，兼容橫、豎屏幕的切換。

poster：設(shè)置視頻封面，可設(shè)置海報(bào)或截圖(不過圖片尺寸不好控制)。

autoplay/preload: 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。對于免費(fèi)的內(nèi)容。可以立刻播放。否則用戶點(diǎn)擊了播放就跳到“訂購”。如果自動播放會占用用戶的流量 。

loop： 如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。

controls：如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕、全屏。如果需要自定義播放器樣式，可以設(shè)置該屬性不去顯示默認(rèn)控件。利用瀏覽器 JavaScript 接口實(shí)現(xiàn)相應(yīng)的功能。

元素提供的方法如下(參見W3C School)。

元素提供的屬性如下。

元素提供的事件如下。

兼容性測試

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

為什么有些安卓手機(jī)無法播放視頻？ ……我們知道安卓播放跟廠商支持情況有關(guān)，其實(shí)前端 JS 這邊對 標(biāo)簽的解析和 H264 的解碼做不了什么實(shí)質(zhì)的事情，我們只能盡量使用 HTML5 的 API 接口找到 hack 各種設(shè)備的方案，但關(guān)鍵還是看廠商支持情況，所以要在前端實(shí)現(xiàn)適配難度很大。

……

安卓由于嚴(yán)重的系統(tǒng)碎片化問題，導(dǎo)致不同的廠商、不同的瀏覽器對上述兩種條件的支持各不相同，所以安卓沒法簡單的說到底是否支持 HTML5 播放，甚至同一個廠商的不同機(jī)型，其特點(diǎn)都不一樣，我們遇到過單獨(dú)支持 flash 的，單獨(dú)支持 html5 的，或者二者都支持的，甚至還有都不支持的，另外還有明明實(shí)際上能使用 HTML5 播放但 API 又返回說不支持播放的。對此我們針對不同的 Android 設(shè)備和瀏覽器做了些矯正和強(qiáng)制判斷，許多問題需要 Case by Case 去解決。

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

機(jī)型

是否支持區(qū)域播放

直播格式

點(diǎn)播格式

視頻格式

rtsp

m3u8

3gp

mp4

Android

2.2

4

No

Yes

No

Yes

Yes

Android

2.3

5

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 8

6

7

No

No

No

Yes

Yes

WP 8.1

8

Yes

No

No

Yes

Yes

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

視頻格式方面：一般安卓機(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 中打開這個特性，僅限應(yīng)用內(nèi)的 Webview 使用，——這也就是朋友圈能夠區(qū)域播放的原因。

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

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

具體障礙

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

渲染問題，例如 QQ 瀏覽器，直播播放器播放時滾動會遮蓋導(dǎo)航，UC 瀏覽器 標(biāo)簽總是在前，設(shè)置 z-index 無效。

華為機(jī)器不能播放標(biāo)清內(nèi)容(RTSP 流)

QQ X5 內(nèi)核瀏覽器需要直接寫 m3u8，不能跳轉(zhuǎn)方式指定。

小米1 video 標(biāo)簽失效(Android 4.1 默認(rèn)瀏覽器)，屬于兼容性問題。

播放源地址，如果經(jīng)過 HTTP 302 重定向跳轉(zhuǎn)的話，低于 Android 4.4 的機(jī)器可能不能最終獲取 m3u8/mp3/3gp 源地址。尤其對于直播的地址，因?yàn)樾枰b權(quán)、獲取手機(jī)號碼等流程，中間需要經(jīng)過多次跳轉(zhuǎn)，所以舊版的瀏覽器就不能播放了1。試比較以下 HTML 代碼的寫法：

對此，我們暫時暴露最終源地址給前端 標(biāo)簽。不過這樣帶來潛在的一個問題(見下一點(diǎn))。

因?yàn)樵吹刂分苯颖┞读?#xff0c;所以對防盜鏈方面來說是有害而無利的。之所以之前的跳轉(zhuǎn)獲取源地址相對是安全點(diǎn)的，是因?yàn)槟谦@取過程是間接的。——當(dāng)然無論間接還是直接，終端還是曉得源地址的。

poster="img.jpg" 設(shè)置圖片，不能 100% 自適應(yīng)寬度。進(jìn)而使用 video.background CSS 屬性，但會有播放時背景不會消失的問題(Android 上)

iOS 7 Safari 不能使用 onclick 登記單擊事件； iOS 8 無此問題

iOS 8 下如果設(shè)置播放源 src="" 為空的話，會向用戶提示“不可播放”的圖標(biāo)；iOS 7 不會。這個情況是說用戶沒有權(quán)限播放的時候才會設(shè)置 src=“”。

綜上三點(diǎn)問題所述，采用一層 遮罩的做法，播放的時候才顯示 video 標(biāo)簽。這步需要相關(guān)的? JavaScript 的編碼。

總結(jié)

以上是生活随笔為你收集整理的html在线音频播放器实训总结,HTML5 播放器心得与小结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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