兼容Android的html5移動端視頻播放video全屏處理/自動播放/播放控制/隱藏播放控制項

05-18

轉載： android下html5的視頻播放一直是前端兼容的重災區，各種體驗差，被詬病已久。但之前的故宮穿越H5，和吳亦凡入伍H5，利用的視頻技術，貌似又給人一種新面貌。

前段時間做某項目，恰好也是一個類似視頻全屏的，下面跟大家分享下經歷的坑和填坑的辦法。

ios端問題其實沒什麼，基本都在android端，基本每一個帶有視頻的項目都會遇到的，當然有特殊需求的產生的情況另說了就，問題主要有幾個方面：

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

video全屏的處理

這個其實不難，只需在video標籤加個webkit-playsinline屬性即可，這個屬性基本上在基於webkit內核的移動端都是沒問題的，此全屏非彼全屏，它是在瀏覽器視窗內的全屏，並不是占居整個手機的全屏，當然我們做web端需要的就是在document的body內的視窗範圍的全屏。

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

在ios下，視頻被嵌入後，媒體的元數據載入完成後，會以全屏的形式顯示出來，或者加個poster，可以看到畫面。但在android下，多數機子是不顯示視頻畫面的，要不就是顯示一個黑色的還不是全屏的播放控制項，即使及加個poster封面也不濟於是。因為poster在android兼容的並不好，不如在視頻上層加個div鋪張圖片，這個比較好的處理方式應該是：視頻上加一層div做封面，由於android不允許視頻上層有東西，所以首先將視頻設為的width：1px，當播放後，上層的封面remove掉，同時width：100%或者你想要的寬度。

video的自動播放

這個的話就不多說了，相信大家跟我一樣，試圖尋找android下，頁面載入完畢就可以自動播放，但現實是殘酷的，android下是不允許自動播放的，即使你用了video.play(),也是不行的。必須有用戶的主動觸發，比如觸摸了屏幕，有click或touch事件產生。不知以後android會不會改進，但至少目前來看是不行的。比較的好的辦法是，引導用戶觸發，滑屏或touch的行為，然後調用video.play()播放，給用戶一個自動播放的錯覺。

video播放的控制

對於video或者audio等媒體元素，有一些方法，常用的有play(),pause();也有一些事件，如loadstart,canplay,canplaythrough,ended,timeupdate…..等等。

在移動端有一些坑需要注意，不要輕易使用媒體元素的除』ended』,』timeupdate』以外event事件，在不同的機子上可能有不同的情況產生，例如：

ios下監聽canplay和canplaythrough（是否已緩衝了足夠的數據可以流暢播放）,當載入時是不會觸發的，即使preload=」auto」也沒用，但在pc的chrome調試器下和android下，是會在載入階段就觸發。ios需要播放後才會觸發。

總之就是現在的視頻標準還不盡完善，有很多坑要注意，要使用前最好自己親測一遍。

關於控制的問題還想說一點就是android在播放視頻時會有個控制項初始化的過程，在全屏視頻想偽裝成非視頻時，是我們很不想看到的，我的解決思路是這樣：在我們需要播放時提前初始化它，即需要播放的時間前先設width:1px;然後play()一下，使視頻已經播放初始化。然後再需要播放的時候再次play()時就不會產生，控制項拉伸的情況了。

「去除」android下的播放控制項條

重頭戲來了，相信這個這個問題已困擾無數的前端開發人員，再搜尋這個問題的解決方法時，幾乎所有的文章都是告訴你android下，播放器的控制項是去不了的。其實似乎確實是這樣的，但你看了故宮穿越H5，和吳一凡那個H5後，會發現，在android下，也是沒有控制條的。最初看到那些H5視頻我首先並沒有去看他們的內容多麼新穎，傳播量多麼廣，我是第一時間測試了android下的兼容問題，發現並沒有出現控制條。在我研究半天未果時，在一篇技術帖中看到說：因是騰訊自己的項目，微信是騰訊自己的，他們在瀏覽器里做了一些配置，對旗下出品的H5有所「優待」，才能確保視頻的順利「喬裝」。

上面的說法我並沒有真正核實過，但好像是這麼回事，非常有幸我做的那個視頻項目也是騰訊的，其實是有機會可以向他們證實一下以上說法的，但即使是這樣的，也只有騰訊的項目有這樣的解決辦法，對於廣大的開發者來說似乎並太不公平，我試圖找到一種解決去除播放控制項的解決方案，下面是我花了很多心思找到的一種解決辦法，看似很簡單也不那麼高大尚，但確實解決了問題，跟大家分享：

我這裡只看android的情況，ios基本沒什麼問題，就忽略啦。

測試機android版本：5.1

首先我們將那個H5視頻地址嵌入自己的頁面，你會發現確實播放器出現了。如下

怎麼辦呢，不是騰訊自己的項目就沒辦法了嘛？再我搜了N多資料未果後，發現了一個細節，控制條始終是最下方的，可不可以讓視頻的尺寸放大些，將控制條頂到瀏覽窗口外面，就看不到了嘛，於是我將視頻寬高放大到120%-----控制項條神奇的『消失』了（其實是頂到視窗外面了），驚喜萬分啊。

具體思路和實現如下：html中將video標籤外包一層，

<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結構的，也不會響應click、touch等事件。如果視頻尺寸大了，會產生滾動條，必須在html和body加overflow：hidden，在videobox加沒用的。*/

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

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

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

相應產生的一些問題的解決辦法：

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

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

2，視頻播放完畢後會中間自動出現播放控制項按鈕

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

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

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

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