隨着 4G 的普遍以及 WiFi 的廣泛使用，手機上的網速已經足夠穩定和高速，以視頻為主的 HTML5 也越來越普遍了，相比幀動畫，視頻的表現更加豐富，這里介紹一些實踐經驗。
video的屬性
<video id="video" src="video.mp4" controls = "true" poster="images.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>-
src: 視頻的地址
-
controls: 加上這個屬性，Gecko 會提供用戶控制，允許用戶控制視頻的播放，包括音量，跨幀，暫停/恢復播放。
-
poster: 屬性規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。如果未設置該屬性，則使用視頻的第一幀來代替。
-
preload: 屬性規定在頁面加載后載入視頻。
-
webkit-playsinline和playsinline: 視頻播放時局域播放，不脫離文檔流 。但是這個屬性比較特別， 需要嵌入網頁的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，如果APP不設置，你頁面中加了這標簽也無效，這也就是為什么安卓手機WeChat 播放視頻總是全屏，因為APP不支持playsinline，而ISO的WeChat卻支持。
這里就要補充下，如果是想做全屏直播或者全屏H5體驗的用戶，IOS需要設置刪除 webkit-playsinline 標簽，因為你設置 false 是不支持的 ，安卓則不需要，因為默認全屏。但這時候全屏是有播放控件的，無論你有沒有設置control。 做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放時候的控件，需要以下設置：同層播放 -
x-webkit-airplay="allow" : 這個屬性應該是使此視頻支持ios的AirPlay功能。使用AirPlay可以直接從使用iOS的設備上的不同位置播放視頻、音樂還有照片文件，也就是說通過AirPlay功能可以實現影音文件的無線播放，當然前提是播放的終端設備也要支持相應的功能
-
x5-video-player-type: 啟用同層H5播放器，就是在視頻全屏的時候，div可以呈現在視頻層上，也是WeChat安卓版特有的屬性。同層播放別名也叫做沉浸式播放，播放的時候看似全屏，但是已經除去了control和微信的導航欄，只留下"X"和"<"兩鍵。目前的同層播放器只在Android（包括微信）上生效，暫時不支持iOS。至於為什么同層播放只對安卓開放，是因為安卓不能像ISO一樣局域播放，默認的全屏會使得一些界面操作被阻攔，如果是全屏H5還好，但是做直播的話，諸如彈幕那樣的功能就無法實現了，所以這時候同層播放的概念就解決了這個問題。不過在測試的過程中發現，不同版本的IOS和安卓效果略有不同
-
x5-video-orientation: 聲明播放器支持的方向，可選值landscape 橫屏, portraint豎屏。默認值portraint。無論是直播還是全屏H5一般都是豎屏播放，但是這個屬性需要x5-video-player-type開啟H5模式
-
x5-video-player-fullscreen:全屏設置。它又兩個屬性值，ture和false，true支持全屏播放，false不支持全屏播放。其實，IOS 微信瀏覽器是Chrome的內核，相關的屬性都支持，也是為什么X5同層播放不支持的原因。安卓微信瀏覽器是X5內核，一些屬性標簽比如playsinline就不支持，所以始終全屏。
全屏處理
-
ios
ios加playsinline屬性，之前只帶webkit前綴的在ios10以后，會吊起系統自帶播放器，兩個屬性都加上基本ios端都可以保證內斂到瀏覽器webview里面了。如果仍有個別版本的ios會吊起播放器，還可以引用一個庫iphone-inline-video（具體用法很簡單看它github，這里不介紹了，只需加js一句話，css加點），github地址加上playsinline webkit-playsinline這兩個屬性和這個庫基本可以保證ios端沒有問題了（不過親測，只加這兩個屬性不引入庫好像也是ok的，至今沒有在ios端微信沒有出現問題，如果你要兼容uc或者qq的瀏覽器建議帶上這個庫）. -
android
x5-video-player-type="h5"屬性，騰訊x5內核系的android微信和手Q內置瀏覽器用的瀏覽器webview的內核，使用這個屬性在微信中視頻會有不同的表現，會呈現全屏狀態，貌似播放控件剝去了，至少加了這個屬性后視頻上層可以有其他dom元素出現了（非騰訊白名單機制的一種處理措施）。
<video id="video" src="xx.mp4" playsinline webkit-playsinline></video>自動播放
android始終不能自動播放，不多說。值得一提的是經測現在ios10后版本的safari和微信都不讓視頻自動播放了（順帶音頻也不能自動播放了），但微信提供了一個事件WeixinJSBridgeReady，在微信嵌入webview全局的這個事件觸發后，視頻仍可以自動播放，這個應該是現在在ios端微信的視頻自動播放的比較靠譜的方式，其他如手q或者其他瀏覽器，建議就引導用戶出發觸屏的行為操作出發比較好。
document.addEventListener("WeixinJSBridgeReady", function (){ video.play(); video.pause(); }, false)播放控制
對於video或者audio等媒體元素，有一些方法，常用的有play(),pause();也有一些事件，如'loadstart','canplay','canplaythrough','ended','timeupdate'.....等等。
在移動端有一些坑需要注意，不要輕易使用媒體元素的除'ended','timeupdate'以外event事件，在不同的機子上可能有不同的情況產生，例如：ios下監聽'canplay'和'canplaythrough'（是否已緩沖了足夠的數據可以流暢播放）,當加載時是不會觸發的，即使preload="auto"也沒用，但在pc的chrome調試器下和android下，是會在加載階段就觸發。ios需要播放后才會觸發。總之就是現在的視頻標准還不盡完善，有很多坑要注意，要使用前最好自己親測一遍
就是當第一次播放視頻的時候ios端，如果網絡慢，視頻從開始播到能展現畫面會有短暫的黑屏（處理視頻源數據的時間），為了避免這個黑屏，可以在視頻上加個div浮層（可以一個假的視頻第一幀），然后用timeupdate方法監聽，視屏播放及有畫面的時候再移除浮層
video.addEventListener('timeupdate',function (){ //當視頻的currentTime大於0.1時表示黑屏時間已過，已有視頻畫面，可以移除浮層（.pagestart的div元素） if ( !video.isPlayed && this.currentTime>0.1 ){ $('.pagestart').fadeOut(500); video.isPlayed = !0; } })隱藏播放控件
據說騰訊的android團隊的x5內核團隊放開了視頻播放的限制，視頻不一定調用它們那個備受詬病的視頻播放器了，x5-video-player-type="h5"屬性這個屬性好像就有點那個意思，雖然體驗還是有點...（導航欄也會清理）但至少播放器控件沒有了，上層可以浮div或者其他元素了，這個還是值得一提。還有一點值得說的是，帶播放器控件的隱藏.
<div class="videobox" ontouchmove="return false;"> <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video> </div>比如這個videobox在android下隱藏，只用display：none貌似還是不行的，但加個z-index:-1，設置成-1就可以達到隱藏播放器控件的目的了。
原文:https://segmentfault.com/a/1190000009395289
video標簽去除下載按鈕
HTML中直接使用video來播放視頻，在Chrome瀏覽器、360瀏覽器、QQ瀏覽器（以及其他一些使用Chrome內核Blink）等中都會出現下載按鈕，但我們一般又不希望出現下載按鈕。
好像是從Chrome 54版本開發有下載按鈕的（從網上看到的，我也不確定），網上有css解決方案，如下：
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
我試了之后在chrome內核： 56.0.2924.90 之下確實可以將下載按鈕去除，不過看上面的css大致意思就是將控制器的寬度加寬30px，然后通過overflow:hidden;去除顯示，不過感覺好像不是多靠譜，然后接着網上看資料，就看到了HTMLMediaElement.controlsList。
HTMLMediaElement.controlsList
HTMLMediaElement接口的controlsList 屬性返回DOMTokenList，幫助用戶在顯示其自己的控件集時選擇要在媒體元素上顯示的控件。DOMTokenList可以設置以下三個可能值中的一個或多個：nodownload，nofullscreen和noremoteplayback。
也就是說可以通過設置controlsList屬性來控制是否顯示下載按鈕，如下：
<video controls controlslist="nodownload" id="video" src=""></video>
1
設置controlslist="nodownload"之后，在我當前使用的Chrome瀏覽器（69）就不會出現下載按鈕。
關於controlsList可以查看https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsList 。
這里是一個關於controlsList使用的示例 。
但是我又想兼容例如56版本的Chrome瀏覽器怎么辦呢，我試着加上上述的css解決方案並設置controlslist="nodownload"，在56版本的Chrome瀏覽器和69版本的谷歌瀏覽器兩個都可以正常顯示。
但是我用360瀏覽器（內核版本63）以及QQ瀏覽器（內核版本63）如果同時設置以上的兩種解決方案是有問題的，會將全屏按鈕一並隱藏，所以可能在56版本的Chrome瀏覽器不支持controlslist="nodownload"就將其忽略，而在69版本的谷歌瀏覽器上面的css解決方案已經無效了。
所以現在如果要統一解決的話，在低版本54.0-57.0之間使用上面的css解決方案，而在58版本之后使用controlslist="nodownload"解決。
————————————————
版權聲明：本文為CSDN博主「樊小書生」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/fxss5201/article/details/83513275