這篇文章主要介紹怎么解決HTML5微信播放全屏問題，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

站在用戶的角度思考問題，與客戶深入溝通，找到臺江網(wǎng)站設(shè)計與臺江網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋臺江地區(qū)。

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

<video
  id="videoALL" 
  src="video/01.mp4" 
  poster="images/1.jpg" /*視頻封面*/
  preload="auto" 
  webkit-playsinline="true" /*這個屬性是ios 10中設(shè)置可以
                     讓視頻在小窗內(nèi)播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信瀏覽器支持小窗內(nèi)播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h6"  /*啟用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è)置該屬性，則使用視頻的第一幀來代替。

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

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

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

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

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

x5-video-orientation：聲明播放器支持的方向，可選值landscape 橫屏, portraint豎屏。默認(rèn)值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)核，一些屬性標(biāo)簽比如playsinline就不支持，所以始終全屏。

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

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

<p id="videobox">
   <video 
    id="videoALL" 
    src="mp4.mp4" 
    poster="1.jpg" 
    preload="auto" 
    webkit-playsinline="true" 
    playsinline="true" 
    x-webkit-airplay="allow" 
    x5-video-player-type="h6" 
    x5-video-player-fullscreen="true" 
    x5-video-orientation="portraint"
    style="object-fit:fill">
    </video> 
   <p id="btn" onclick="playcontr()"></p>
</p>
<p id="videoend"><p id="againbtn" onclick="playcontr()"></p></p>

*{
            padding: 0;
            margin: 0;
        }
    #videobox{position: absolute;width: 100%;height: 100%;background-color: green;background-image: url(1.jpg);background-size: 100% 100%;background-position: top;overflow: hidden;}
    #videoALL{
  height: auto;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: fill;
  display: block;
  background-size: cover;
  overflow: hidden;}
    #btn,#againbtn{width: 81px;height: 75px;position: absolute;top: 50%;left:50%;margin-top: -37.5px;margin-left: -40.5px;background-image: url(btn.png);background-size: 100% 100%;}
    #videoend{position: absolute;background-color: pink;display: none;background-image: url(2.jpg);background-size: cover;background-position: top;}

<script>
var videoALL = document.getElementById('videoALL'),
    videobox = document.getElementById('videobox'),
    btn = document.getElementById('btn'),
    videoend =  document.getElementById('videoend');
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
videoALL.style.width = clientWidth + 'px';
videoALL.style.height = 'auto';
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
function stylep(pId){
    pId.style.width = clientWidth + 'px';
    pId.style.height = clientHeight +200+ 'px'; 
}
stylep(videobox);
stylep(videoend);
var u = navigator.userAgent; 
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端 
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 
function playcontr(){
    if (isAndroid) {
       videoALL.style.width = window.screen.width + 'px';
       videoALL.style.height = window.screen.height + 'px'; 
    }
    videobox.style.display = "block";
    videoALL.play();
    btn.style.display = "none";
    videoend.style.display = "none";
};
videoALL.addEventListener('pause',function(){  
    videoALL.style.width = clientWidth + 'px';
    btn.style.display = "block";
})  
videoALL.addEventListener("ended",function(){
    videoALL.pause();
    videobox.style.display = "none";
    videoend.style.display = "block";
});
</script>

以上是怎么解決HTML5微信播放全屏問題的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：怎么解決HTML5微信播放全屏問題
分享網(wǎng)址：http://chinadenli.net/article10/gpcogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、做網(wǎng)站、手機網(wǎng)站建設(shè)、商城網(wǎng)站、軟件開發(fā)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)