久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

H5案例分享:微信視頻播放全屏問題

 黃三歲大愛人生 2018-09-08

 

微信視頻播放全屏問題

   在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下的樣式

 

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,,所有內(nèi)容均由用戶發(fā)布,,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息,,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,,請(qǐng)點(diǎn)擊一鍵舉報(bào),。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多