解決辦法：給video標簽加一些屬性，調用h5原生video。

 video id= videoALL  src= video/01.mp4  poster= images/1.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豎屏，默認值為豎屏*/ >
poster= images/1.jpg :屬性規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。如果未設置該屬性，則使用視頻的第一幀來代替。
preload= auto ：屬性規定在頁面加載后載入視頻。
webkit-playsinline和playsinline：視頻播放時局域播放，不脫離文檔流 。但是這個屬性比較特別， 需要嵌入網頁的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，如果APP不設置，你頁面中加了這標簽也無效，這也就是為什么安卓手機WeChat 播放視頻總是全屏，因為APP不支持playsinline，而ISO的WeChat卻支持。
這里就要補充下，如果是想做全屏直播或者全屏H5體驗的用戶，ISO需要設置刪除 webkit-playsinline 標簽，因為你設置 false 是不支持的 ，安卓則不需要，因為默認全屏。但這時候全屏是有播放控件的，無論你有沒有設置control。 做直播的可能用得著播放控件，但是全屏H5是不需要的，那么去除全屏播放時候的控件，需要以下設置：同層播放。
x-webkit-airplay= allow 暫時無法確切的知道其作用，但是小編猜測，這個屬性應該是使此視頻支持ios的AirPlay功能。使用AirPlay可以直接從使用iOS的設備上的不同位置播放視頻、音樂還有照片文件，也就是說通過AirPlay功能可以實現影音文件的無線播放，當然前提是播放的終端設備也要支持相應的功能。
x5-video-player-type：啟用同層H5播放器，就是在視頻全屏的時候，p可以呈現在視頻層上，也是WeChat安卓版特有的屬性。同層播放別名也叫做沉浸式播放，播放的時候看似全屏，但是已經除去了control和微信的導航欄，只留下 X 和 兩鍵。目前的同層播放器只在Android（包括微信）上生效，暫時不支持iOS。至于為什么同層播放只對安卓開放，是因為安卓不能像ISO一樣局域播放，默認的全屏會使得一些界面操作被阻攔，如果是全屏H5還好，但是做直播的話，諸如彈幕那樣的功能就無法實現了，所以這時候同層播放的概念就解決了這個問題。不過在測試的過程中發現，不同版本的ISO和安卓效果略有不同。
x5-video-orientation：聲明播放器支持的方向，可選值landscape 橫屏, portraint豎屏。默認值portraint。無論是直播還是全屏H5一般都是豎屏播放，但是這個屬性需要x5-video-player-type開啟H5模式
x5--video--player--fullscreen：全屏設置。它又兩個屬性值，ture和false，true支持全屏播放，false不支持全屏播放。
其實，ISO 微信瀏覽器是Chrome的內核，相關的屬性都支持，也是為什么X5同層播放不支持的原因。安卓微信瀏覽器是X5內核，一些屬性標簽比如playsinline就不支持，所以始終全屏。
還有個問題，在Android的微信里面，就算加上了上面的屬性，還會出現上下有黑邊，不能全屏的問題。
解決辦法：給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= h5  x5-video-player-fullscreen= true  x5-video-orientation= portraint  >
*{ 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 ) //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打開手機掃碼功能及優缺點_html5教程技巧
最全的HTML5全局屬性匯總
HTML5單頁面手勢滑屏切換原理分析
以上就是如何解決HTML5微信播放全屏問題的方法的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。