本文我們持續帶給大家新的知識，如何解決HTML5微信播放全螢幕問題的方法。在ios和安卓手機裡的微信下播放視頻時，會遇到不少問題，例如需要手動點擊，視頻才會播放，並且視頻會跳出微信框，出現控制條，如果視頻不是騰訊視頻，播放完畢會出現騰訊影片的廣告推播等問題
解決方法：為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竖屏，默认值为竖屏*/
style="object-fit:fill">
</video>登入後複製
poster="images/1.jpg":屬性規定影片下載時顯示的影像，或在使用者點擊播放按鈕前顯示的影像。如果未設定該屬性，則使用影片的第一幀來代替。
preload="auto" ：屬性規定在頁面載入後載入影片。
webkit-playsinline和playsinline：影片播放時區域播放，不脫離文件流 。但這個屬性比較特別，需要嵌入網頁的APP例如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，如果APP不設置，你頁面中加了這標籤也無效，這也就是為什麼安卓手機WeChat 播放視頻總是全屏，因為APP不支援playsinline，而ISO的微信卻支持。
這裡就要補充下，如果是想做全螢幕直播或全螢幕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"
style="object-fit:fill">
</video>
<p id="btn" onclick="playcontr()"></p>
</p>
<p id="videoend"><p id="againbtn" onclick="playcontr()"></p></p></p>
<pre class="brush:php;toolbar:false">*{
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開啟手機掃碼功能及優缺點_html5教學技巧
#最完整的HTML5全域屬性總覽
HTML5單一頁面手勢滑軌切換原理分析
以上是如何解決HTML5微信播放全螢幕問題的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
