這篇文章主要為大家展示了“如何解決HTML5微信播放全屏問題”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“如何解決HTML5微信播放全屏問題”這篇文章吧。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)邯山免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

在ios和安卓手機里的微信下播放視頻時，會遇到不少問題，例如需要手動點擊，視頻才會播放，并且視頻會跳出微信框，出現(xiàn)控制條，如果視頻不是騰訊視頻，播放完畢會出現(xiàn)騰訊視頻的廣告推送等問題

解決辦法：給video標簽加一些屬性，調(diào)用h6原生video。

poster="images/1.jpg":屬性規(guī)定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。如果未設(shè)置該屬性，則使用視頻的第一幀來代替。

preload="auto" ：屬性規(guī)定在頁面加載后載入視頻。

webkit-playsinline和playsinline：視頻播放時局域播放，不脫離文檔流 。但是這個屬性比較特別， 需要嵌入網(wǎng)頁的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，如果APP不設(shè)置，你頁面中加了這標簽也無效，這也就是為什么安卓手機WeChat 播放視頻總是全屏，因為APP不支持playsinline，而ISO的WeChat卻支持。

這里就要補充下，如果是想做全屏直播或者全屏H5體驗的用戶，ISO需要設(shè)置刪除 webkit-playsinline 標簽，因為你設(shè)置 false 是不支持的 ，安卓則不需要，因為默認全屏。但這時候全屏是有播放控件的，無論你有沒有設(shè)置control。 做直播的可能用得著播放控件，但是全屏H5是不需要的，那么去除全屏播放時候的控件，需要以下設(shè)置：同層播放。

x-webkit-airplay="allow"暫時無法確切的知道其作用，但是小編猜測，這個屬性應(yīng)該是使此視頻支持ios的AirPlay功能。使用AirPlay可以直接從使用iOS的設(shè)備上的不同位置播放視頻、音樂還有照片文件，也就是說通過AirPlay功能可以實現(xiàn)影音文件的無線播放，當然前提是播放的終端設(shè)備也要支持相應(yīng)的功能。

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

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

x5­-video­-player­-fullscreen：全屏設(shè)置。它又兩個屬性值，ture和false，true支持全屏播放，false不支持全屏播放。

其實，ISO 微信瀏覽器是Chrome的內(nèi)核，相關(guān)的屬性都支持，也是為什么X5同層播放不支持的原因。安卓微信瀏覽器是X5內(nèi)核，一些屬性標簽比如playsinline就不支持，所以始終全屏。

還有個問題，在Android的微信里面，就算加上了上面的屬性，還會出現(xiàn)上下有黑邊，不能全屏的問題。

解決辦法：給video加上object-fit: fill;的style屬性。如果還是有黑邊有可能是視頻尺寸不合適。