淺談html5 video 移動端填坑記
本文介紹了html5 video 移動端填坑記，分享給大家，具體如下：
?| 12345678910111213141516171819202122232425262728 | <video id="video"style="object-fit:fill"autoplaywebkit-playsinline playsinline x5-video-player-type="h5"x5-video-player-fullscreen="true"x5-video-orientation="portraint"src="video.mp4" /></video><!--object-fit: fill 視訊內容充滿整個video容器poster:"img.jpg" 視訊封面autoplay： 自動播放auto - 當頁面載入後載入整個視訊meta - 當頁面載入後只載入元資料none - 當頁面載入後不載入視訊muted：當設定該屬性後，它規定視訊的音訊輸出應該被靜音webkit-playsinline playsinline: 內聯播放x5-video-player-type="h5" : 啟用x5核心H5播放器x5-video-player-fullscreen="true" 全屏設定。ture和false的設定會導致佈局上的不一樣x5-video-orientation="portraint" ：宣告播放器支援的方向，可選值landscape 橫屏,portraint豎屏。預設值portraint。無論是直播還是全屏H5一般都是豎屏播放，但是這個屬性需要x5-video-player-type開啟H5模式--> |
自動播放
設定autoplay屬性
?| 1 | <video autoplay></video> |
移動瀏覽器中
但是在很多移動瀏覽器裡，都是要求使用者的真實操作來（touchend、click、doubleclick 或 keydown 事件等標準的事件）觸發呼叫video.play(),才能自動播放影音視訊。
?| 123 | dom.addEventListener('click', function () {video.play()}) |
微信中
也可以在 wx.ready()裡觸發video.play()
| 123 | wx.ready(function () {video.play()}) |
內聯播放
設定屬性 webkit-playsinline playsinline
?| 1 | <video id="video" webkit-playsinline playsinline /></video> |
在iOS Safari和一些安卓的一些瀏覽器下播放視訊的時候，不能在h5頁面中播放視訊，系統會自動接管視訊
如果需要在h5頁面內播放視訊，需要在視訊標籤上加上 webkit-playsinline，在iOS10以後，需要加上playsinline,建議同時加上這兩個屬性。同時還需要app支援這種模式
?