在html5移動端video視頻在安卓中兼容問題解決方法分享！ 代碼步驟詳解！

具體思路和實現(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，非常重要，不能省。
因為微信android的播放器是脫離DOM結(jié)構(gòu)的，也不會響應(yīng)click、touch等事件。
如果視頻尺寸大了，會產(chǎn)生滾動條，必須在html和body加overflow：hidden，
在videobox加沒用的。
*/

當(dāng)視頻要播放時改變video的寬度（高度會等比縮放，即使自定義高度也是沒用的，會被忽略）：

  var video = document.querySelector('#mainvideo');
  var videobox = document.querySelector('.videobox');

  //播放時改變外層包裹的寬度，使video寬度增加，
  //相應(yīng)高度也增加了,播放器控件被擠下去，配合overflow：hidden
  //控件看不見也觸摸不到了
  var setVideoStyle = function (){
    videobox.style.width = '120%';
    videobox.style.left = '-10%';
    video.style.width = '100%';
  }

當(dāng)然上面這樣寫參雜了一些需求邏輯，也可以直接樣式表就width:120%,或者更大；這個根據(jù)自己的需要來，但基本思路就是將播放器控件頂出視窗之外，達到一種‘去除’、‘消失’的效果。連‘小窗’字樣也被頂出去了，用過android或測試過的同學(xué)都知道點了小窗后會怎樣....（原版的即使去掉了播放器，但小窗字樣還在，不能算完全的隱藏播放控件吧）

相應(yīng)產(chǎn)生的一些問題的解決辦法：

1，視頻被放大了，畫面會被截掉一部分怎么辦？

這個可以在視頻輸出的時候兩邊和下邊留一些留白，即留白可以沒用畫面黑色底，但又屬于視頻尺寸的一部分，放視頻放大后，將主體畫面置滿視窗，被擠到外面都是留白的即可。

2，視頻播放完畢后會中間自動出現(xiàn)播放控件按鈕

如果確實不想在播放完是出現(xiàn)一個按鈕，哪怕只有零點幾秒，就把視頻remove掉，可以使用timeupdate監(jiān)聽視頻播放，用video.duration-video.currentTime的差值判斷是否快要結(jié)束了，在結(jié)束前零點幾秒提前remove掉。

3，要是不是全屏視頻怎么搞？

可以，思路是一樣的，將視頻控件頂出外層的包裹層，利用overflow：hidden。只是全屏的外層包裹是body而已。

哦了，終于可以搞一個全屏視頻偽裝的東西了。

2017-03-21補
隨著時間的變遷，設(shè)備和技術(shù)的更新，本著不坑害同胞的心，負責(zé)任更新下還是有必要的
咱們還是從上面的4個要點來說ios和android吧

• 全屏處理；
• 自動播放；
• 播放控制；
• 隱藏播放控件；

補充--全屏處理

ios加playsinline屬性，之前只帶webkit前綴的在ios10以后，會吊起系統(tǒng)自帶播放器，兩個屬性都加上基本ios端都可以保證內(nèi)斂到瀏覽器webview里面了。如果仍有個別版本的ios會吊起播放器，還可以引用一個庫iphone-inline-video（具體用法很簡單看它github，這里不介紹了，只需加js一句話，css加點），
github地址是https://github.com/fregante/iphone-inline-video，加上playsinline webkit-playsinline這兩個屬性和這個庫基本可以保證ios端沒有問題了（不過親測，只加這兩個屬性不引入庫好像也是ok的，至今沒有在ios端微信沒有出現(xiàn)問題，如果你要兼容uc或者qq的瀏覽器建議帶上這個庫），
最后介紹個新的x5-video-player-type="h5"屬性，騰訊x5內(nèi)核系的android微信和手Q內(nèi)置瀏覽器用的瀏覽器webview的內(nèi)核，使用這個屬性在微信中視頻會有不同的表現(xiàn)，會呈現(xiàn)全屏狀態(tài)，貌似播放控件剝?nèi)チ?，至少加了這個屬性后視頻上層可以有其他dom元素出現(xiàn)了（非騰訊白名單機制的一種處理措施）

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

補充--自動播放

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

//也可以在這個事件觸發(fā)后播放一次然后暫停（這樣以后視頻會處于加載狀態(tài)，為后面的流暢播放做準(zhǔn)備）
document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

補充--播放控制

關(guān)于控制，這里僅補充一點吧，就是當(dāng)?shù)谝淮尾シ乓曨l的時候ios端，如果網(wǎng)絡(luò)慢，視頻從開始播到能展現(xiàn)畫面會有短暫的黑屏（處理視頻源數(shù)據(jù)的時間），為了避免這個黑屏，可以在視頻上加個div浮層（可以一個假的視頻第一幀），然后用timeupdate方法監(jiān)聽，視屏播放及有畫面的時候再移除浮層：

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

補充--隱藏播放控件

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

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

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

那么以上的內(nèi)容就是有關(guān)于：“在html5移動端video視頻在安卓中兼容問題解決方法分享！ ”這方面的全部內(nèi)容了，如果對編程有興趣的小伙伴們可以在W3Cschool進行學(xué)習(xí)，多種語言和基礎(chǔ)教程更是有超多體系課程可以學(xué)習(xí)！