對(duì)于安卓的使用已經(jīng)是一個(gè)成熟的技術(shù)了，但是對(duì)于使用兼容的問題還是普遍存在的，那么今天我們就來說說有關(guān)于：“在html5移動(dòng)端video視頻在安卓中兼容問題解決方法分享！”這方面的相關(guān)內(nèi)容！
前段時(shí)間做某項(xiàng)目，恰好也是一個(gè)類似視頻全屏的，下面跟大家分享下經(jīng)歷的坑和填坑的辦法。
ios端問題其實(shí)沒什么，基本都在android端，基本每一個(gè)帶有視頻的項(xiàng)目都會(huì)遇到的，當(dāng)然有特殊需求的產(chǎn)生的情況另說了就，問題主要有幾個(gè)方面：
- 全屏處理；
- 自動(dòng)播放；
- 播放控制；
- 隱藏播放控件；
video全屏的處理
這個(gè)其實(shí)不難，只需在video標(biāo)簽加個(gè)webkit-playsinline屬性即可，這個(gè)屬性基本上在基于webkit內(nèi)核的移動(dòng)端都是沒問題的，此全屏非彼全屏，它是在瀏覽器視窗內(nèi)的全屏，并不是占居整個(gè)手機(jī)的全屏，當(dāng)然我們做web端需要的就是在document的body內(nèi)的視窗范圍的全屏。
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>在ios下，視頻被嵌入后，媒體的元數(shù)據(jù)加載完成后，會(huì)以全屏的形式顯示出來，或者加個(gè)poster，可以看到畫面。但在android下，多數(shù)機(jī)子是不顯示視頻畫面的，要不就是顯示一個(gè)黑色的還不是全屏的播放控件，即使及加個(gè)poster封面也不濟(jì)于是。因?yàn)閜oster在android兼容的并不好，不如在視頻上層加個(gè)div鋪張圖片，這個(gè)比較好的處理方式應(yīng)該是：視頻上加一層div做封面，由于android不允許視頻上層有東西，所以首先將視頻設(shè)為的width：1px，當(dāng)播放后，上層的封面remove掉，同時(shí)width：100%或者你想要的寬度。
video的自動(dòng)播放
這個(gè)的話就不多說了，相信大家跟我一樣，試圖尋找android下，頁面加載完畢就可以自動(dòng)播放，但現(xiàn)實(shí)是殘酷的，android下是不允許自動(dòng)播放的，即使你用了video.play(),也是不行的。必須有用戶的主動(dòng)觸發(fā)，比如觸摸了屏幕，有click或touch事件產(chǎn)生。不知以后android會(huì)不會(huì)改進(jìn)，但至少目前來看是不行的。比較的好的辦法是，引導(dǎo)用戶觸發(fā)，滑屏或touch的行為，然后調(diào)用video.play()播放，給用戶一個(gè)自動(dòng)播放的錯(cuò)覺。
video播放的控制
對(duì)于video或者audio等媒體元素，有一些方法，常用的有play(),pause();也有一些事件，如'loadstart','canplay','canplaythrough','ended','timeupdate'.....等等。
在移動(dòng)端有一些坑需要注意，不要輕易使用媒體元素的除'ended','timeupdate'以外event事件，在不同的機(jī)子上可能有不同的情況產(chǎn)生，例如：
ios下監(jiān)聽'canplay'和'canplaythrough'（是否已緩沖了足夠的數(shù)據(jù)可以流暢播放）,當(dāng)加載時(shí)是不會(huì)觸發(fā)的，即使preload="auto"也沒用，但在pc的chrome調(diào)試器下和android下，是會(huì)在加載階段就觸發(fā)。ios需要播放后才會(huì)觸發(fā)。
總之就是現(xiàn)在的視頻標(biāo)準(zhǔn)還不盡完善，有很多坑要注意，要使用前最好自己親測一遍。
關(guān)于控制的問題還想說一點(diǎn)就是android在播放視頻時(shí)會(huì)有個(gè)控件初始化的過程，在全屏視頻想偽裝成非視頻時(shí)，是我們很不想看到的，我的解決思路是這樣：
在我們需要播放時(shí)提前初始化它，即需要播放的時(shí)間前先設(shè)width:1px;然后play()一下，使視頻已經(jīng)播放初始化。然后再需要播放的時(shí)候再次play()時(shí)就不會(huì)產(chǎn)生，控件拉伸的情況了。
“去除”android下的播放控件條
重頭戲來了，相信這個(gè)這個(gè)問題已困擾無數(shù)的前端開發(fā)人員，再搜尋這個(gè)問題的解決方法時(shí)，幾乎所有的文章都是告訴你android下，播放器的控件是去不了的。其實(shí)似乎確實(shí)是這樣的，但你看了故宮穿越H5，和吳一凡那個(gè)H5后，會(huì)發(fā)現(xiàn)，在android下，也是沒有控制條的。最初看到那些H5視頻我首先并沒有去看他們的內(nèi)容多么新穎，傳播量多么廣，我是第一時(shí)間測試了android下的兼容問題，發(fā)現(xiàn)并沒有出現(xiàn)控制條。在我研究半天未果時(shí)，在一篇技術(shù)帖中看到說：因是騰訊自己的項(xiàng)目，微信是騰訊自己的，他們在瀏覽器里做了一些配置，對(duì)旗下出品的H5有所“優(yōu)待”，才能確保視頻的順利“喬裝”。
上面的說法我并沒有真正核實(shí)過，但好像是這么回事，非常有幸我做的那個(gè)視頻項(xiàng)目也是騰訊的，其實(shí)是有機(jī)會(huì)可以向他們證實(shí)一下以上說法的，但即使是這樣的，也只有騰訊的項(xiàng)目有這樣的解決辦法，對(duì)于廣大的開發(fā)者來說似乎并太不公平，我試圖找到一種解決去除播放控件的解決方案，下面是我花了很多心思找到的一種解決辦法，看似很簡單也不那么高大尚，但確實(shí)解決了問題，跟大家分享：
我這里只看android的情況，ios基本沒什么問題，就忽略啦。
測試機(jī)android版本：5.1
首先我們將那個(gè)H5視頻地址嵌入自己的頁面，你會(huì)發(fā)現(xiàn)確實(shí)播放器出現(xiàn)了。如下
怎么辦呢，不是騰訊自己的項(xiàng)目就沒辦法了嘛？再我搜了N多資料未果后，發(fā)現(xiàn)了一個(gè)細(xì)節(jié)，控制條始終是最下方的，可不可以讓視頻的尺寸放大些，將控制條頂?shù)綖g覽窗口外面，就看不到了嘛，于是我將視頻寬高放大到120%-----控件條神奇的‘消失’了（其實(shí)是頂?shù)揭暣巴饷媪耍?/code>，驚喜萬分啊。
具體思路和實(shí)現(xiàn)如下：
html中將video標(biāo)簽外包一層，
<div class="videobox">
<video id="mainvideo" webkit-playsinline="true" src="http://7xvl2z.com1.z0.glb.clouddn.com/nigg2.mp4"></video>
</div>初始樣式表如下：
html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
-webkit-user-select: none;
user-select: none;
overflow: hidden;
}
.videobox {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
video {width: 1px;display: blcok;}
/*
注：html，body里的overflow：hidden，非常重要，不能省。
因?yàn)槲⑿臿ndroid的播放器是脫離DOM結(jié)構(gòu)的，也不會(huì)響應(yīng)click、touch等事件。
如果視頻尺寸大了，會(huì)產(chǎn)生滾動(dòng)條，必須在html和body加overflow：hidden，
在videobox加沒用的。
*/當(dāng)視頻要播放時(shí)改變video的寬度（高度會(huì)等比縮放，即使自定義高度也是沒用的，會(huì)被忽略）：
var video = document.querySelector('#mainvideo');
var videobox = document.querySelector('.videobox');
//播放時(shí)改變外層包裹的寬度，使video寬度增加，
//相應(yīng)高度也增加了,播放器控件被擠下去，配合overflow：hidden
//控件看不見也觸摸不到了
var setVideoStyle = function (){
videobox.style.width = '120%';
videobox.style.left = '-10%';
video.style.width = '100%';
}當(dāng)然上面這樣寫參雜了一些需求邏輯，也可以直接樣式表就width:120%,或者更大；這個(gè)根據(jù)自己的需要來，但基本思路就是將播放器控件頂出視窗之外，達(dá)到一種‘去除’、‘消失’的效果。連‘小窗’字樣也被頂出去了，用過android或測試過的同學(xué)都知道點(diǎn)了小窗后會(huì)怎樣....（原版的即使去掉了播放器，但小窗字樣還在，不能算完全的隱藏播放控件吧）
相應(yīng)產(chǎn)生的一些問題的解決辦法：
1，視頻被放大了，畫面會(huì)被截掉一部分怎么辦？
這個(gè)可以在視頻輸出的時(shí)候兩邊和下邊留一些留白，即留白可以沒用畫面黑色底，但又屬于視頻尺寸的一部分，放視頻放大后，將主體畫面置滿視窗，被擠到外面都是留白的即可。
2，視頻播放完畢后會(huì)中間自動(dòng)出現(xiàn)播放控件按鈕
如果確實(shí)不想在播放完是出現(xiàn)一個(gè)按鈕，哪怕只有零點(diǎn)幾秒，就把視頻remove掉，可以使用timeupdate監(jiān)聽視頻播放，用video.duration-video.currentTime的差值判斷是否快要結(jié)束了，在結(jié)束前零點(diǎn)幾秒提前remove掉。
3，要是不是全屏視頻怎么搞？
可以，思路是一樣的，將視頻控件頂出外層的包裹層，利用overflow：hidden。只是全屏的外層包裹是body而已。
哦了，終于可以搞一個(gè)全屏視頻偽裝的東西了。
2017-03-21補(bǔ)
隨著時(shí)間的變遷，設(shè)備和技術(shù)的更新，本著不坑害同胞的心，負(fù)責(zé)任更新下還是有必要的
咱們還是從上面的4個(gè)要點(diǎn)來說ios和android吧
- 全屏處理；
- 自動(dòng)播放；
- 播放控制；
- 隱藏播放控件；
補(bǔ)充--全屏處理
ios加playsinline屬性，之前只帶webkit前綴的在ios10以后，會(huì)吊起系統(tǒng)自帶播放器，兩個(gè)屬性都加上基本ios端都可以保證內(nèi)斂到瀏覽器webview里面了。如果仍有個(gè)別版本的ios會(huì)吊起播放器，還可以引用一個(gè)庫iphone-inline-video（具體用法很簡單看它github，這里不介紹了，只需加js一句話，css加點(diǎn)），
github地址是https://github.com/fregante/iphone-inline-video，加上playsinline webkit-playsinline這兩個(gè)屬性和這個(gè)庫基本可以保證ios端沒有問題了（不過親測，只加這兩個(gè)屬性不引入庫好像也是ok的，至今沒有在ios端微信沒有出現(xiàn)問題，如果你要兼容uc或者qq的瀏覽器建議帶上這個(gè)庫），
最后介紹個(gè)新的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="mainvideo" src="test.mp4" playsinline webkit-playsinline></video>補(bǔ)充--自動(dòng)播放
android始終不能自動(dòng)播放，不多說。值得一提的是經(jīng)測現(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)用戶出發(fā)觸屏的行為操作出發(fā)比較好。
//也可以在這個(gè)事件觸發(fā)后播放一次然后暫停（這樣以后視頻會(huì)處于加載狀態(tài)，為后面的流暢播放做準(zhǔn)備）
document.addEventListener("WeixinJSBridgeReady", function (){
video.play();
video.pause();
}, false)補(bǔ)充--播放控制
關(guān)于控制，這里僅補(bǔ)充一點(diǎn)吧，就是當(dāng)?shù)谝淮尾シ乓曨l的時(shí)候ios端，如果網(wǎng)絡(luò)慢，視頻從開始播到能展現(xiàn)畫面會(huì)有短暫的黑屏（處理視頻源數(shù)據(jù)的時(shí)間），為了避免這個(gè)黑屏，可以在視頻上加個(gè)div浮層（可以一個(gè)假的視頻第一幀），然后用timeupdate方法監(jiān)聽，視屏播放及有畫面的時(shí)候再移除浮層：
video.addEventListener('timeupdate',function (){
//當(dāng)視頻的currentTime大于0.1時(shí)表示黑屏?xí)r間已過，已有視頻畫面，可以移除浮層（.pagestart的div元素）
if ( !video.isPlayed && this.currentTime>0.1 ){
$('.pagestart').fadeOut(500);
video.isPlayed = !0;
}
})補(bǔ)充--隱藏播放控件
據(jù)說騰訊的android團(tuán)隊(duì)的x5內(nèi)核團(tuán)隊(duì)放開了視頻播放的限制，視頻不一定調(diào)用它們那個(gè)備受詬病的視頻播放器了，x5-video-player-type="h5"屬性這個(gè)屬性好像就有點(diǎn)那個(gè)意思，雖然體驗(yàn)還是有點(diǎn)...（導(dǎo)航欄也會(huì)清理）但至少播放器控件沒有了，上層可以浮div或者其他元素了，這個(gè)還是值得一提。
還有一點(diǎn)值得說的是，帶播放器控件的隱藏，
<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á)到隱藏播放器控件的目的了。這個(gè)經(jīng)測可用且好用，可以一試。
那么以上的內(nèi)容就是有關(guān)于：“在html5移動(dòng)端video視頻在安卓中兼容問題解決方法分享！ ”這方面的全部內(nèi)容了，如果對(duì)編程有興趣的小伙伴們可以在W3Cschool進(jìn)行學(xué)習(xí)，多種語言和基礎(chǔ)教程更是有超多體系課程可以學(xué)習(xí)！
