沐鳴:_微信H5 Video 開發小結

最近開發公眾號內H5網頁過程中,為了達到“炫”的效果,有些特效採用了video展示,但是微信內的video展示着實太費神了,這裏總結一些遇到的坑和解決的辦法。

video的屬性

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

  • controls: 加上這個屬性,Gecko 會提供用戶控制,允許用戶控制視頻的播放,包括音量,跨幀,暫停/恢復播放。

  • poster: 屬性規定視頻下載時显示的圖像,或者在用戶點擊播放按鈕前显示的圖像。如果未設置該屬性,則使用視頻的第一幀來代替。

  • preload: 屬性規定在頁面加載后載入視頻。

  • webkit-playsinline和playsinline: 視頻播放時局域播放,不脫離文檔流。但是這個屬性比較特別,需要嵌入網頁的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效。換句話說,如果APP不設置,你頁面中加了這標籤也無效,這也就是為什麼安卓手機WeChat 播放視頻總是全屏,因為APP不支持playsinline,而IOS的WeChat卻支持。
    這裏就要補充下,如果是想做全屏直播或者全屏H5體驗的用戶,IOS需要設置刪除 webkit-playsinline 標籤,因為你設置 false 是不支持的 ,安卓則不需要,因為默認全屏。但這時候全屏是有播放控件的,無論你有沒有設置control。 做直播的可能用得着播放控件,但是全屏H5是不需要的,那麼去除全屏播放時候的控件,需要以下設置:同層播放

  • x-webkit-airplay=”allow” : 這個屬性應該是使此視頻支持ios的AirPlay功能。使用AirPlay可以直接從使用iOS的設備上的不同位置播放視頻、音樂還有照片文件,也就是說通過AirPlay功能可以實現影音文件的無線播放,當然前提是播放的終端設備也要支持相應的功能

  • x5-video-player-type: 啟用同層H5播放器,就是在視頻全屏的時候,div可以呈現在視頻層上,也是WeChat安卓版特有的屬性。同層播放別名也叫做沉浸式播放,播放的時候看似全屏,但是已經除去了control和微信的導航欄,只留下”X”和”<”兩鍵。目前的同層播放器只在Android(包括微信)上生效,暫時不支持iOS。至於為什麼同層播放只對安卓開放,是因為安卓不能像ISO一樣局域播放,默認的全屏會使得一些界面操作被阻攔,如果是全屏H5還好,但是做直播的話,諸如彈幕那樣的功能就無法實現了,所以這時候同層播放的概念就解決了這個問題。不過在測試的過程中發現,不同版本的IOS和安卓效果略有不同

  • x5-video-orientation: 聲明播放器支持的方向,可選值landscape 橫屏, portraint豎屏。默認值portraint。無論是直播還是全屏H5一般都是豎屏播放,但是這個屬性需要x5-video-player-type開啟H5模式

  • x5­-video­-player­-fullscreen:全屏設置。它又兩個屬性值,ture和false,true支持全屏播放,false不支持全屏播放。其實,IOS 微信瀏覽器是Chrome的內核,相關的屬性都支持,也是為什麼X5同層播放不支持的原因。安卓微信瀏覽器是X5內核,一些屬性標籤比如playsinline就不支持,所以始終全屏。

playsinline 屬性在 iOS 10 之前需要寫成 webkit-playsinline,它的瀏覽器廠商前綴在 iOS 10 中被移除。但是目前 iOS 微信還不支持去掉前綴的寫法,兩個屬性最好都加上。

Media方法和屬性

htmlVideoElement 和htmlAudioElement 均繼承自htmlMediaElement

//錯誤狀態 
Media.error; //null:正常 
Media.error.code; //1.用戶終止 2.網絡錯誤 3.解碼錯誤 4.URL無效 

//網絡狀態 
Media.currentSrc; //返回當前資源的URL 
Media.src = value; //返回或設置當前資源的URL 
Media.canPlayType(type); //是否能播放某種格式的資源 
Media.networkState; //0.此元素未初始化 1.正常但沒有使用網絡 2.正在下載數據 3.沒有找到資源 
Media.load(); //重新加載src指定的資源 
Media.buffered; //返回已緩衝區域,TimeRanges 
Media.preload; //none:不預載 metadata:預載資源信息 auto: 

//準備狀態 
Media.readyState;  //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA 
Media.seeking; //是否正在seeking 

//回放狀態 
Media.currentTime = value; //當前播放的位置,賦值可改變位置 
Media.startTime; //一般為0,如果為流媒體或者不從0開始的資源,則不為0 
Media.duration; //當前資源長度 流返回無限 
Media.paused; //是否暫停 
Media.defaultPlaybackRate = value;//默認的回放速度,可以設置 
Media.playbackRate = value;//當前播放速度,設置后馬上改變 
Media.played; //返回已經播放的區域,TimeRanges,關於此對象見下文 
Media.seekable; //返回可以seek的區域 TimeRanges 
Media.ended; //是否結束 
Media.autoPlay; //是否自動播放 
Media.loop; //是否循環播放 
Media.play();  //播放 
Media.pause();  //暫停 

//控制 
Media.controls;//是否有默認控制條 
Media.volume = value; //音量 
Media.muted = value; //靜音 

//TimeRanges(區域)對象 
TimeRanges.length; //區域段數 
TimeRanges.start(index) //第index段區域的開始位置 
TimeRanges.end(index) //第index段區域的結束位置

Media相關的事件

"loadstart":客戶端開始請求數據
"progress":客戶端正在請求數據
"suspend":延遲下載
"abort":客戶端主動終止下載(不是因為錯誤引起),
"error":請求數據時遇到錯誤
"stalled":網速失速
"play":play()和autoplay開始播放時觸發
"pause":pause()觸發
"loadedmetadata":成功獲取資源長度
"loadeddata":
"waiting":等待數據,並非錯誤
"playing":開始回放
"canplay":可以播放,但中途可能因為加載而暫停
"canplaythrough":可以播放,歌曲全部加載完畢
"seeking":尋找中
"seeked":尋找完畢
"timeupdate":播放時間改變
"ended":播放結束
"ratechange":播放速率改變
"durationchange":資源長度改變
"volumechange":音量改變

事件、屬性及展示效果使用常見問題

預加載

移動端原因, video 並不會主動去預加載用戶未需求的資源,因此我們需要手動去觸發 video 的預加載資源(安卓端下,滾動行為不歸屬在用戶操作行為中)

document.getElementById('my-video').play();

這樣就可以了嗎?不,萬惡的微信限制了必須用戶行為才能播放媒體資源,因此我們只能再祭出萬能 hack:

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
document.addEventListener('DOMContentLoaded', function() {
    var video = document.getElementById('my-video');
    function preload() {
        video.play();
        setTimeout(function () {
            video.pause();
        }, 200);
    }
    document.addEventListener("WeixinjsBridgeReady",  preload, false);
    /*這一段調用會有內存問題,暫未找到原因*/
    if (typeof WeixinjsBridge == "object" && typeof WeixinjsBridge.invoke == "function") {
        WeixinjsBridge.invoke("getNetworkType", {}, preload);
    }
    //preload(); 
});

全屏處理

IOS

ios加playsinline屬性,之前只帶webkit前綴的在ios10以後,會弔起系統自帶播放器,兩個屬性都加上基本ios端都可以保證內斂到瀏覽器webview裏面了。如果仍有個別版本的ios會弔起播放器,還可以引用一個庫iphone-inline-video(具體用法很簡單看它 github,這裏不介紹了,只需加js一句話,css加點),github地址加上playsinline webkit-playsinline這兩個屬性和這個庫基本可以保證ios端沒有問題了(不過親測,只加這兩個屬性不引入庫好像也是ok的,至今沒有在ios端微信沒有出現問題,如果你要兼容uc或者qq的瀏覽器建議帶上這個庫)

android

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

自動播放

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

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

播放控制

對於video或者audio等媒體元素,有一些方法,常用的有play(),pause();也有一些事件,如’loadstart’,’canplay’,’canplaythrough’,’ended’,’timeupdate’…..等等。
在移動端有一些坑需要注意,不要輕易使用媒體元素的除’ended’,’timeupdate’以外event事件,在不同的機子上可能有不同的情況產生,例如:ios下監聽’canplay’和’canplaythrough’(是否已緩衝了足夠的數據可以流暢播放),當加載時是不會觸發的,即使preload=”auto”也沒用,但在pc的chrome調試器下和android下,是會在加載階段就觸發。ios需要播放后才會觸發。總之就是現在的視頻標準還不盡完善,有很多坑要注意,要使用前最好自己親測一遍
就是當第一次播放視頻的時候ios端,如果網絡慢,視頻從開始播到能展現畫面會有短暫的黑屏(處理視頻源數據的時間),為了避免這個黑屏,可以在視頻上加個div浮層(可以一個假的視頻第一幀),然後用timeupdate方法監聽,視屏播放及有畫面的時候再移除浮層

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

隱藏播放控件

據說騰訊的android團隊的x5內核團隊放開了視頻播放的限制,視頻不一定調用它們那個備受詬病的視頻播放器了,x5-video-player-type=”h5″屬性這個屬性就有點那個意思,雖然體驗還是有點…(導航欄也會清理)但至少播放器控件沒有了,上層可以浮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,設置成-1就可以達到隱藏播放器控件的目的了。

ps:

ios微信下通過 WeixinjsBridgeReady 事件進行自動播放

document.addEventListener(
    'WeixinJSBridgeReady',
    function() {
        var video = document.getElementById("ckplayer_a1");
        video.play();
    },
    false
);

安卓可以嘗試監聽touchstart事件,用戶觸摸屏幕後自動播放

document.addEventListener('touchstart', function(){ 
    var video = document.getElementById("ckplayer_a1");
        video.play();
}, false);

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8008