對(duì)于前端的video標(biāo)簽視頻最佳實(shí)踐案例分享！

在我們的生活中隨著 4G 的普遍以及 WiFi 的廣泛使用，手機(jī)上的網(wǎng)速已經(jīng)足夠穩(wěn)定和高速，以視頻為主的 HTML5 也越來(lái)越普遍了，相比幀動(dòng)畫(huà)，視頻的表現(xiàn)更加豐富，那么今天我們就來(lái)講講有關(guān)于：“對(duì)于前端的video標(biāo)簽視頻最佳實(shí)踐案例分享！”這方面的相關(guān)內(nèi)容吧！

結(jié)果如下所示：

video的屬性：

<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg" /*視頻封面*/
  preload="auto" 
  webkit-playsinline="true" /*這個(gè)屬性是ios 10中設(shè)置可以
                     讓視頻在小窗內(nèi)播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信瀏覽器支持小窗內(nèi)播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*啟用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏設(shè)置，
                     設(shè)置為 true 是防止橫屏*/
  x5-video-orientation="portraint" //播放器支付的方向， landscape橫屏，portraint豎屏，默認(rèn)值為豎屏
  style="object-fit:fill">
</video>

src: 視頻的地址

controls: 加上這個(gè)屬性，Gecko 會(huì)提供用戶(hù)控制，允許用戶(hù)控制視頻的播放，包括音量，跨幀，暫停/恢復(fù)播放。

poster: 屬性規(guī)定視頻下載時(shí)顯示的圖像，或者在用戶(hù)點(diǎn)擊播放按鈕前顯示的圖像。如果未設(shè)置該屬性，則使用視頻的第一幀來(lái)代替。

preload: 屬性規(guī)定在頁(yè)面加載后載入視頻。

webkit-playsinline和playsinline: 視頻播放時(shí)局域播放，不脫離文檔流 。但是這個(gè)屬性比較特別， 需要嵌入網(wǎng)頁(yè)的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話(huà)說(shuō)，如果APP不設(shè)置，你頁(yè)面中加了這標(biāo)簽也無(wú)效，這也就是為什么安卓手機(jī)WeChat 播放視頻總是全屏，因?yàn)锳PP不支持playsinline，而ISO的WeChat卻支持。
這里就要補(bǔ)充下，如果是想做全屏直播或者全屏H5體驗(yàn)的用戶(hù)，IOS需要設(shè)置刪除 webkit-playsinline 標(biāo)簽，因?yàn)槟阍O(shè)置 false 是不支持的 ，安卓則不需要，因?yàn)槟J(rèn)全屏。但這時(shí)候全屏是有播放控件的，無(wú)論你有沒(méi)有設(shè)置control。 做直播的可能用得著播放控件，但是全屏H5是不需要的，那么去除全屏播放時(shí)候的控件，需要以下設(shè)置：同層播放

x-webkit-airplay="allow" : 這個(gè)屬性應(yīng)該是使此視頻支持ios的AirPlay功能。使用AirPlay可以直接從使用iOS的設(shè)備上的不同位置播放視頻、音樂(lè)還有照片文件，也就是說(shuō)通過(guò)AirPlay功能可以實(shí)現(xiàn)影音文件的無(wú)線(xiàn)播放，當(dāng)然前提是播放的終端設(shè)備也要支持相應(yīng)的功能

x5-video-player-type: 啟用同層H5播放器，就是在視頻全屏的時(shí)候，div可以呈現(xiàn)在視頻層上，也是WeChat安卓版特有的屬性。同層播放別名也叫做沉浸式播放，播放的時(shí)候看似全屏，但是已經(jīng)除去了control和微信的導(dǎo)航欄，只留下"X"和"<"兩鍵。目前的同層播放器只在Android（包括微信）上生效，暫時(shí)不支持iOS。至于為什么同層播放只對(duì)安卓開(kāi)放，是因?yàn)榘沧坎荒芟馡SO一樣局域播放，默認(rèn)的全屏?xí)沟靡恍┙缑娌僮鞅蛔钄r，如果是全屏H5還好，但是做直播的話(huà)，諸如彈幕那樣的功能就無(wú)法實(shí)現(xiàn)了，所以這時(shí)候同層播放的概念就解決了這個(gè)問(wèn)題。不過(guò)在測(cè)試的過(guò)程中發(fā)現(xiàn)，不同版本的IOS和安卓效果略有不同

x5-video-orientation: 聲明播放器支持的方向，可選值landscape 橫屏, portraint豎屏。默認(rèn)值portraint。無(wú)論是直播還是全屏H5一般都是豎屏播放，但是這個(gè)屬性需要x5-video-player-type開(kāi)啟H5模式

x5--video--player--fullscreen:全屏設(shè)置。它又兩個(gè)屬性值，ture和false，true支持全屏播放，false不支持全屏播放。其實(shí)，IOS 微信瀏覽器是Chrome的內(nèi)核，相關(guān)的屬性都支持，也是為什么X5同層播放不支持的原因。安卓微信瀏覽器是X5內(nèi)核，一些屬性標(biāo)簽比如playsinline就不支持，所以始終全屏。

全屏處理

ios
ios加playsinline屬性，之前只帶webkit前綴的在ios10以后，會(huì)吊起系統(tǒng)自帶播放器，兩個(gè)屬性都加上基本ios端都可以保證內(nèi)斂到瀏覽器webview里面了。如果仍有個(gè)別版本的ios會(huì)吊起播放器，還可以引用一個(gè)庫(kù)iphone-inline-video（具體用法很簡(jiǎn)單看它github，這里不介紹了，只需加js一句話(huà)，css加點(diǎn)），github地址加上playsinline webkit-playsinline這兩個(gè)屬性和這個(gè)庫(kù)基本可以保證ios端沒(méi)有問(wèn)題了（不過(guò)親測(cè)，只加這兩個(gè)屬性不引入庫(kù)好像也是ok的，至今沒(méi)有在ios端微信沒(méi)有出現(xiàn)問(wèn)題，如果你要兼容uc或者qq的瀏覽器建議帶上這個(gè)庫(kù)）.

android
x5-video-player-type="h5"屬性，騰訊x5內(nèi)核系的android微信和手Q內(nèi)置瀏覽器用的瀏覽器webview的內(nèi)核，使用這個(gè)屬性在微信中視頻會(huì)有不同的表現(xiàn)，會(huì)呈現(xiàn)全屏狀態(tài)，貌似播放控件剝?nèi)チ?，至少加了這個(gè)屬性后視頻上層可以有其他dom元素出現(xiàn)了（非騰訊白名單機(jī)制的一種處理措施）。

<video id="video" src="xx.mp4" playsinline webkit-playsinline></video>

自動(dòng)播放

android始終不能自動(dòng)播放，不多說(shuō)。值得一提的是經(jīng)測(cè)現(xiàn)在ios10后版本的safari和微信都不讓視頻自動(dòng)播放了（順帶音頻也不能自動(dòng)播放了），但微信提供了一個(gè)事件WeixinJSBridgeReady，在微信嵌入webview全局的這個(gè)事件觸發(fā)后，視頻仍可以自動(dòng)播放，這個(gè)應(yīng)該是現(xiàn)在在ios端微信的視頻自動(dòng)播放的比較靠譜的方式，其他如手q或者其他瀏覽器，建議就引導(dǎo)用戶(hù)出發(fā)觸屏的行為操作出發(fā)比較好。

document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

播放控制

對(duì)于video或者audio等媒體元素，有一些方法，常用的有play(),pause();也有一些事件，如'loadstart','canplay','canplaythrough','ended','timeupdate'.....等等。
在移動(dòng)端有一些坑需要注意，不要輕易使用媒體元素的除'ended','timeupdate'以外event事件，在不同的機(jī)子上可能有不同的情況產(chǎn)生，例如：ios下監(jiān)聽(tīng)'canplay'和'canplaythrough'（是否已緩沖了足夠的數(shù)據(jù)可以流暢播放）,當(dāng)加載時(shí)是不會(huì)觸發(fā)的，即使preload="auto"也沒(méi)用，但在pc的chrome調(diào)試器下和android下，是會(huì)在加載階段就觸發(fā)。ios需要播放后才會(huì)觸發(fā)?？傊褪乾F(xiàn)在的視頻標(biāo)準(zhǔn)還不盡完善，有很多坑要注意，要使用前最好自己親測(cè)一遍
就是當(dāng)?shù)谝淮尾シ乓曨l的時(shí)候ios端，如果網(wǎng)絡(luò)慢，視頻從開(kāi)始播到能展現(xiàn)畫(huà)面會(huì)有短暫的黑屏（處理視頻源數(shù)據(jù)的時(shí)間），為了避免這個(gè)黑屏，可以在視頻上加個(gè)div浮層（可以一個(gè)假的視頻第一幀），然后用timeupdate方法監(jiān)聽(tīng)，視屏播放及有畫(huà)面的時(shí)候再移除浮層

video.addEventListener('timeupdate',function (){
    //當(dāng)視頻的currentTime大于0.1時(shí)表示黑屏?xí)r間已過(guò)，已有視頻畫(huà)面，可以移除浮層（.pagestart的div元素）
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $('.pagestart').fadeOut(500);
        video.isPlayed = !0;
    }
})

隱藏播放控件

據(jù)說(shuō)騰訊的android團(tuán)隊(duì)的x5內(nèi)核團(tuán)隊(duì)放開(kāi)了視頻播放的限制，視頻不一定調(diào)用它們那個(gè)備受詬病的視頻播放器了，x5-video-player-type="h5"屬性這個(gè)屬性好像就有點(diǎn)那個(gè)意思，雖然體驗(yàn)還是有點(diǎn)...（導(dǎo)航欄也會(huì)清理）但至少播放器控件沒(méi)有了，上層可以浮div或者其他元素了，這個(gè)還是值得一提。還有一點(diǎn)值得說(shuō)的是，帶播放器控件的隱藏.

<div class="videobox" ontouchmove="return false;">
    <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>

比如這個(gè)videobox在android下隱藏，只用display：none貌似還是不行的，但加個(gè)z-index:-1，設(shè)置成-1就可以達(dá)到隱藏播放器控件的目的了。

參考文章

html5--移動(dòng)端視頻video的android兼容，去除播放控件、全屏等
MDN-Video
視頻H5のVideo標(biāo)簽在微信里的坑和技巧
移動(dòng)端HTML5<video>視頻播放優(yōu)化實(shí)踐
微信端視頻播放問(wèn)題

那么到此這篇關(guān)于“對(duì)于前端的video標(biāo)簽視頻最佳實(shí)踐案例分享！”的文章就介紹到這了,更多相關(guān)Html5 video內(nèi)容請(qǐng)搜索W3Cschool進(jìn)行學(xué)習(xí)！