微信視頻播放全屏問題 在ios和安卓手機(jī)里的微信下播放視頻時(shí),會(huì)遇到不少問題,,例如需要手動(dòng)點(diǎn)擊,,視頻才會(huì)播放,并且視頻會(huì)跳出微信框,,出現(xiàn)控制條,,如果視頻不是騰訊視頻,播放完畢會(huì)出現(xiàn)騰訊視頻的廣告推送,,今天我們就來看一下如何規(guī)避這些問題,。
解決辦法:給video標(biāo)簽加一些屬性,調(diào)用h5原生video,。 下面是我寫的一個(gè)小例子的html核心部分: <video
id='videoALL'
src='video/01.mp4'
poster='images/1.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>
下面我們來看看這些屬性的作用:
poster='images/1.jpg':屬性規(guī)定視頻下載時(shí)顯示的圖像,,或者在用戶點(diǎn)擊播放按鈕前顯示的圖像,。如果未設(shè)置該屬性,,則使用視頻的第一幀來代替。
preload='auto' :屬性規(guī)定在頁面加載后載入視頻,。
webkit-playsinline和playsinline:視頻播放時(shí)局域播放,,不脫離文檔流 。但是這個(gè)屬性比較特別,, 需要嵌入網(wǎng)頁的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,,才能生效。換句話說,,如果APP不設(shè)置,,你頁面中加了這標(biāo)簽也無效,這也就是為什么安卓手機(jī)WeChat 播放視頻總是全屏,,因?yàn)锳PP不支持playsinline,,而ISO的WeChat卻支持。 這里就要補(bǔ)充下,,如果是想做全屏直播或者全屏H5體驗(yàn)的用戶,,ISO需要設(shè)置刪除 webkit-playsinline 標(biāo)簽,因?yàn)槟阍O(shè)置 false 是不支持的 ,,安卓則不需要,,因?yàn)槟J(rèn)全屏。但這時(shí)候全屏是有播放控件的,,無論你有沒有設(shè)置control,。 做直播的可能用得著播放控件,但是全屏H5是不需要的,,那么去除全屏播放時(shí)候的控件,,需要以下設(shè)置:同層播放。
x-webkit-airplay='allow'暫時(shí)無法確切的知道其作用,,但是小編猜測(cè),,這個(gè)屬性應(yīng)該是使此視頻支持ios的AirPlay功能。使用AirPlay可以直接從使用iOS的設(shè)備上的不同位置播放視頻,、音樂還有照片文件,,也就是說通過AirPlay功能可以實(shí)現(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ì)安卓開放,,是因?yàn)榘沧坎荒芟馡SO一樣局域播放,默認(rèn)的全屏?xí)沟靡恍┙缑娌僮鞅蛔钄r,,如果是全屏H5還好,,但是做直播的話,諸如彈幕那樣的功能就無法實(shí)現(xiàn)了,,所以這時(shí)候同層播放的概念就解決了這個(gè)問題,。不過在測(cè)試的過程中發(fā)現(xiàn),不同版本的ISO和安卓效果略有不同,。
x5-video-orientation:聲明播放器支持的方向,,可選值landscape 橫屏, portraint豎屏。默認(rèn)值portraint,。無論是直播還是全屏H5一般都是豎屏播放,,但是這個(gè)屬性需要x5-video-player-type開啟H5模式
x5--video--player--fullscreen:全屏設(shè)置。它又兩個(gè)屬性值,,ture和false,true支持全屏播放,,false不支持全屏播放,。 其實(shí),ISO 微信瀏覽器是Chrome的內(nèi)核,,相關(guān)的屬性都支持,,也是為什么X5同層播放不支持的原因。安卓微信瀏覽器是X5內(nèi)核,,一些屬性標(biāo)簽比如playsinline就不支持,,所以始終全屏。
還有個(gè)問題,,在Android的微信里面,,就算加上了上面的屬性,還會(huì)出現(xiàn)上下有黑邊,,不能全屏的問題,。 解決辦法:給video加上object-fit: fill;的style屬性。如果還是有黑邊有可能是視頻尺寸不合適,。
而且小編發(fā)現(xiàn)視頻在打開的瞬間,,會(huì)出現(xiàn)很明顯的放縮閃屏問題,只需要給視頻設(shè)置一個(gè)合適的寬高就可以解決啦,。
DEMO演示
DEMO在iOS和Android下的樣式
|
|