<div id="video" src="" controls="true" poster="" preload="auto" webkit-playsinline="true"></div>
屬性介紹：
1）src:視頻地址
2）controls:Gecoko會提供用戶控制，允許用戶控制視頻的播放，包括音量，跨幀，暫停/恢復播放；
3）poster：規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。如果未能設置該屬性，則使用視頻的第一幀來代替；
4）preload：屬性規定在頁面加載后載入視頻；
5）webkit-playsinline和playsinline：視頻播放時局域播放，不脫離文檔流。但是這個屬性比較特別，需要嵌入的APP比如webchat中
webview.allowsInlineMediaPlayback = YES,才能生效。換句話說，如果APP不設置，你頁面中加了這標簽也無效，這也就為什么安卓手機
wechat視頻播放總是全屏，因為APP不支持playsinline,而IOS的wechat支持；
這里就要補充下，如果是想做全屏直播或者全屏H5體驗的用戶，IOS需要設置刪除 webkit-playsinline 標簽，因為你設置 false 是不支持的 ，
安卓則不需要，因為默認全屏。但這時候全屏是有播放控件的，無論你有沒有設置control。 做直播的可能用得着播放控件，但是全屏H5是不需要的，
那么去除全屏播放時候的控件，需要以下設置：同層播放
6）x-webkit-airplay="allow";這個屬性應該是此視頻支持IOS的AirPlay功能。使用AirPlay可以直接從使用IOS的設備上的不同位置播放視頻
音樂還有照片文件。也就是說通過AirPlay功能可以實現影音文件的無線播放，當然前提是播放的終端設備也要支持相應的功能；
7）x5-video-player-type:啟用同層H5播放器，就是視頻全屏的時候，div可以呈現在視頻層上，也就是wechat安卓特有的屬性。
同層播放別名也叫做沉浸式播放，播放的時候看似全屏，但是已經除去了control和微信的導航欄，只留下“X”和“<”。目前的同層播放只能在
Android（包括微信）上生效，暫時不支持IOS。
8）x5-video-orientation：聲明播放器支持的方向，可選值為landscape橫盤，portaint豎屏（默認值）。無論是直播還是全屏H5一般都是豎屏播放，
但是這個屬性需要x5-video-player-type開啟H5模式；
9）x5-video-player-fullscreen：全屏設置，它有兩個屬性： true 和 false；
全屏處理
ios:
ios加playsinline屬性，之前加webkit前綴的在ios10以后，會吊起系統自動播放器，兩個屬性都加上基本ios端都可以保證內斂到瀏覽器webview中。
如果仍有個別版本的ios會吊起播放器，還可以引用iphone-line-video。
android：
x5-video-player-type="h5"屬性，騰訊X5內核系的android微信和手Q內置瀏覽器用的瀏覽器webview內核，使用這個屬性在微信中適配會有不同的表現，
會呈現全屏狀態，貌似播放控件剝去了，至少加上這個屬性后視頻上層可以由其他DOM元素出現。
自動播放
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時，表示黑屏時間已過，已有視頻畫面，可以移除浮層
if(!video.isPlayed && this.currentTime>0.1){
$('.pagestart').fadeOut(500);
video.isPlayed = !0;
}
})
隱藏播放控件
據說騰訊的安卓團隊的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就可以達到隱藏播放器控件的目的了。
