在ios和安卓手機(jī)里的微信下播放視頻時(shí)淑际，會(huì)遇到不少問(wèn)題畏纲，例如需要手動(dòng)點(diǎn)擊，視頻才會(huì)播放春缕，并且視頻會(huì)強(qiáng)制橫屏播放盗胀，跳出微信框，出現(xiàn)控制條锄贼，關(guān)閉后視頻殘留及引發(fā)布局錯(cuò)亂等問(wè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>
下面我們來(lái)看看這些屬性的作用：
poster="images/1.jpg":屬性規(guī)定視頻下載時(shí)顯示的圖像庸汗，或者在用戶點(diǎn)擊播放按鈕前顯示的圖像。如果未設(shè)置該屬性逻锐，則使用視頻的第一幀來(lái)代替夫晌。
preload="auto" ：屬性規(guī)定在頁(yè)面加載后載入視頻。
webkit-playsinline和playsinline：視頻播放時(shí)局域播放昧诱，不脫離文檔流 。但是這個(gè)屬性比較特別所袁， 需要嵌入網(wǎng)頁(yè)的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES盏档，才能生效。換句話說(shuō)燥爷，如果APP不設(shè)置蜈亩，你頁(yè)面中加了這標(biāo)簽也無(wú)效，這也就是為什么安卓手機(jī)WeChat 播放視頻總是全屏前翎，因?yàn)锳PP不支持playsinline稚配，而ISO的WeChat卻支持。
這里就要補(bǔ)充下港华，如果是想做全屏直播或者全屏H5體驗(yàn)的用戶道川，IOS需要設(shè)置刪除 webkit-playsinline 標(biāo)簽，因?yàn)槟阍O(shè)置 false 是不支持的 立宜，安卓則不需要冒萄，因?yàn)槟J(rèn)全屏。但這時(shí)候全屏是有播放控件的橙数，無(wú)論你有沒(méi)有設(shè)置control尊流。 做直播的可能用得著播放控件，但是全屏H5是不需要的灯帮，那么去除全屏播放時(shí)候的控件崖技，需要以下設(shè)置：同層播放。
x-webkit-airplay="allow"暫時(shí)無(wú)法確切的知道其作用钟哥，猜測(cè)迎献，這個(gè)屬性應(yīng)該是使此視頻支持ios的AirPlay功能。使用AirPlay可以直接從使用iOS的設(shè)備上的不同位置播放視頻瞪醋、音樂(lè)還有照片文件忿晕，也就是說(shuō)通過(guò)AirPlay功能可以實(shí)現(xiàn)影音文件的無(wú)線播放，當(dāng)然前提是播放的終端設(shè)備也要支持相應(yīng)的功能银受。
x5-video-player-type：?jiǎn)⒂猛瑢親5播放器践盼，就是在視頻全屏的時(shí)候鸦采，div可以呈現(xiàn)在視頻層上，也是WeChat安卓版特有的屬性咕幻。同層播放別名也叫做沉浸式播放渔伯，播放的時(shí)候看似全屏，但是已經(jīng)除去了control和微信的導(dǎo)航欄肄程，只留下"X"和"<"兩鍵锣吼。目前的同層播放器只在Android（包括微信）上生效，暫時(shí)不支持iOS蓝厌。至于為什么同層播放只對(duì)安卓開(kāi)放玄叠，是因?yàn)榘沧坎荒芟馡SO一樣局域播放，默認(rèn)的全屏?xí)沟靡恍┙缑娌僮鞅蛔钄r拓提，如果是全屏H5還好读恃，但是做直播的話，諸如彈幕那樣的功能就無(wú)法實(shí)現(xiàn)了代态，所以這時(shí)候同層播放的概念就解決了這個(gè)問(wèn)題寺惫。不過(guò)在測(cè)試的過(guò)程中發(fā)現(xiàn)，不同版本的IOS和安卓效果略有不同蹦疑。
x5-video-orientation：聲明播放器支持的方向西雀，可選值landscape 橫屏, portraint豎屏。默認(rèn)值portraint歉摧。無(wú)論是直播還是全屏H5一般都是豎屏播放艇肴，但是這個(gè)屬性需要x5-video-player-type開(kāi)啟H5模式
x5--video--player--fullscreen：全屏設(shè)置。它又兩個(gè)屬性值判莉，ture和false豆挽，true支持全屏播放，false不支持全屏播放券盅。
其實(shí)帮哈，IOS 微信瀏覽器是Chrome的內(nèi)核，相關(guān)的屬性都支持锰镀，也是為什么X5同層播放不支持的原因娘侍。安卓微信瀏覽器是X5內(nèi)核，一些屬性標(biāo)簽比如playsinline就不支持泳炉，所以始終全屏憾筏。
還有個(gè)問(wèn)題，在Android的微信里面花鹅，就算加上了上面的屬性氧腰，還會(huì)出現(xiàn)上下有黑邊，不能全屏的問(wèn)題。
解決辦法：給video加上object-fit: fill;的style屬性古拴。如果還是有黑邊有可能是視頻尺寸不合適箩帚。
視頻做BOX彈框播放，關(guān)閉視頻同時(shí)關(guān)閉box彈框黄痪，清空box彈框內(nèi)所有的dom元素紧帕。這樣在andriod下會(huì)全屏播放，但關(guān)閉后不會(huì)引發(fā)頁(yè)面錯(cuò)亂桅打。
<!--HTML-->
<div class="video"></div>
<div class="box">
</div>
<!--JS-->
$('.video').on(''click",function(){
$(".box").append("<iframe height=498 width=510 src='http://player.youku.com/embed/XMjUyMDM2NTQ3Mg==' frameborder=0 'allowfullscreen'></iframe>");
$('.box').show();
})
$('.close').on("click",function(){
$('.box').hide()
$('.box').html(' ')
})
