最近做的些web頁面,內嵌許多小視訊，在ios和安卓手機上播放時，遇到不少問題：

• 在微信瀏覽器內播放時，視訊會自動全屏
• 如果每個視訊都有一張自定義的圖片作為封面，在顯示視訊的同時，如果沒有給這個視訊設定高度，視訊的容器在安卓手機上會被視訊的封面撐大到變形
  …….
  現在整理一篇關於 video 的屬性

preload：

這個不做解釋，W3C 上寫的很清楚。

muted：

當設定該屬性後，它規定視訊的音訊輸出應該被靜音

controls：

視訊自動播放設定，但是有經驗的人都應該知道，autoplay標籤在手機上不相容，APP中設定問題導致無法自動播放，無論安卓或IOS。需要模擬自動播放只能通過一些事件觸發。
 

webkit-playsinline/playsinline:

視訊播放時局域播放，不脫離文件流 。但是這個屬性比較特別， 需要嵌入網頁的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，如果APP不設定，你頁面中加了這標籤也無效，這也就是為什麼安卓手機WeChat 播放視訊總是全屏，因為APP不支援playsinline，而ISO的WeChat卻支援。

這裡就要補充下，如果是想做全屏直播或者全屏H5體驗的使用者，ISO需要設定刪除 webkit-playsinline 標籤，因為你設定 false 是不支援的 ，安卓則不需要，因為預設全屏。但這時候全屏是有播放控制元件的，無論你有沒有設定control。 做直播的可能用得著播放控制元件，但是全屏H5是不需要的，那麼去除全屏播放時候的控制元件，需要以下設定：同層播放。

x5-video-player-type：

啟用同層H5播放器，就是在視訊全屏的時候，div可以呈現在視訊層上，也是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的設定會導致佈局上的不一樣，如圖 Click標籤先後的位置。

另外補充下，ISO 微信瀏覽器是Chrome的核心，相關的屬性都支援，也是為什麼X5同層播放不支援的原因。安卓微信瀏覽器是X5核心，一些屬性標籤比如playsinline就不支援，所以始終全屏。

object-fit: fill

在android的微信裡面，會出現上下有黑邊，不能全屏的問題

x-webkit-airplay=”true”

暫時不知道到底是什麼東東 -.-