在ios和安卓手機(jī)里的微信下播放視頻時(shí)，會(huì)遇到不少問題，例如需要手動(dòng)點(diǎn)擊，視頻才會(huì)播放，并且視頻會(huì)跳出微信框，出現(xiàn)控制條，如果視頻不是騰訊視頻，播放完畢會(huì)出現(xiàn)騰訊視頻的廣告推送等問題
解決辦法：給video標(biāo)簽加一些屬性，調(diào)用h5原生video。
<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ī)定在頁(yè)面加載后載入視頻。
webkit-playsinline和playsinline：視頻播放時(shí)局域播放，不脫離文檔流 。但是這個(gè)屬性比較特別， 需要嵌入網(wǎng)頁(yè)的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，如果APP不設(shè)置，你頁(yè)面中加了這標(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屬性。如果還是有黑邊有可能是視頻尺寸不合適。
<div 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> <div id="btn" onclick="playcontr()"></div></div><div id="videoend"><div id="againbtn" onclick="playcontr()"></div></div>
*{ 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 stylediv(divId){ divId.style.width = clientWidth + 'px'; divId.style.height = clientHeight +200+ 'px'; }stylediv(videobox);stylediv(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微信播放全屏問題的解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
