摘要：視頻自動(dòng)播放設(shè)置，但是有經(jīng)驗(yàn)的人都應(yīng)該知道，標(biāo)簽在手機(jī)上不兼容，中設(shè)置問(wèn)題導(dǎo)致無(wú)法自動(dòng)播放，無(wú)論安卓或。安卓微信瀏覽器是內(nèi)核，一些屬性標(biāo)簽比如就不支持，所以始終全屏。

最近做的些web頁(yè)面,內(nèi)嵌許多小視頻，在ios和安卓手機(jī)上播放時(shí)，遇到不少問(wèn)題：

在微信瀏覽器內(nèi)播放時(shí)，視頻會(huì)自動(dòng)全屏

解決辦法：
給video標(biāo)簽加一些屬性，調(diào)用h5原生video，我寫(xiě)了個(gè)例子，加了注釋?zhuān)绻绣e(cuò)誤，煩指正，謝謝！

如果你的video標(biāo)簽也加了上面的屬性，那么，你的視頻可以在IOS手機(jī)上的小窗口播放，同時(shí)，視頻封面同視頻的寬度與高度也保持一致了。

經(jīng)過(guò)各種嘗試，在iOS下，可以給video添加webkit-playsinline屬性，使視頻在頁(yè)面上原本位置播放，但這個(gè)屬性在安卓上無(wú)效。

/華麗麗的分割線，以下內(nèi)容摘抄自網(wǎng)絡(luò)，供參考/

IOS微信瀏覽器是Chrome內(nèi)核，下面大部分屬性都支持，安卓微信瀏覽器是X5內(nèi)核，一些屬性是不支持的，比如可以設(shè)置局部播放的屬性 playsinline，因此，始終是全屏。

下面的內(nèi)容用以解釋上面的內(nèi)容：

preload="auto" ：屬性規(guī)定在頁(yè)面加載后載入視頻。如果設(shè)置了 autoplay 屬性，則忽略該屬性。

一般參數(shù)可能的值：

· auto - 當(dāng)頁(yè)面加載后載入整個(gè)視頻

· meta - 當(dāng)頁(yè)面加載后只載入元數(shù)據(jù)

· none - 當(dāng)頁(yè)面加載后不載入視頻

muted：當(dāng)設(shè)置該屬性后，它規(guī)定視頻的音頻輸出應(yīng)該被靜音

controls="controls" ：屬性規(guī)定瀏覽器應(yīng)該為視頻提供播放控件。

autoplay="autoplay"： 視頻自動(dòng)播放設(shè)置，但是有經(jīng)驗(yàn)的人都應(yīng)該知道，autoplay標(biāo)簽在手機(jī)上不兼容，APP中設(shè)置問(wèn)題導(dǎo)致無(wú)法自動(dòng)播放，無(wú)論安卓或IOS。需要模擬自動(dòng)播放只能通過(guò)一些事件觸發(fā)。

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)的用戶(hù)，ISO需要設(shè)置刪除 webkit-playsinline 標(biāo)簽，因?yàn)槟阍O(shè)置 false 是不支持的 ，安卓則不需要，因?yàn)槟J(rèn)全屏。但這時(shí)候全屏是有播放控件的，無(wú)論你有沒(méi)有設(shè)置control。 做直播的可能用得著播放控件，但是全屏H5是不需要的，那么去除全屏播放時(shí)候的控件，需要以下設(shè)置：同層播放。

x5-video-player-type：?jiǎn)⒂猛瑢親5播放器，就是在視頻全屏的時(shí)候，div可以呈現(xiàn)在視頻層上，也是WeChat安卓版特有的屬性。同層播放別名也叫做沉浸式播放，播放的時(shí)候看似全屏，但是已經(jīng)除去了control和微信的導(dǎo)航欄，只留下"X"和"<"兩鍵。目前的同層播放器只在Android（包括微信）上生效，暫時(shí)不支持iOS。筆者想過(guò)為什么同層播放只對(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)，不同版本的ISO和安卓效果略有不同。

x5-video-orientation：聲明播放器支持的方向，可選值landscape 橫屏, portraint豎屏。默認(rèn)值portraint。無(wú)論是直播還是全屏H5一般都是豎屏播放，但是這個(gè)屬性需要x5-video-player-type開(kāi)啟H5模式

x5-video-player-fullscreen：全屏設(shè)置。筆者還未能領(lǐng)悟這個(gè)標(biāo)簽的用意，在測(cè)試過(guò)程中發(fā)現(xiàn)，ture和false的設(shè)置會(huì)導(dǎo)致布局上的不一樣，如圖 Click標(biāo)簽先后的位置。

另外補(bǔ)充下，ISO 微信瀏覽器是Chrome的內(nèi)核，相關(guān)的屬性都支持，也是為什么X5同層播放不支持的原因。安卓微信瀏覽器是X5內(nèi)核，一些屬性標(biāo)簽比如playsinline就不支持，所以始終全屏。

/貌似到這里，了解了為什么安卓手機(jī)的全屏視頻了/

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

解決辦法：給video加上object-fit: fill;的style屬性。

/關(guān)于微信內(nèi)置瀏覽器不能小窗口播放視頻的問(wèn)題-知乎答/

在最新的ios微信6.5.3及其之后的版本中，webview默認(rèn)支持小窗播放，
開(kāi)發(fā)者需要特別注意小窗播放需要前端同時(shí)適配iOS10和iOS10以下的低版本

適配建議：需要完全按照以下代碼設(shè)置video標(biāo)簽才可同時(shí)兼容不同的iOS版本