淺談html5 video 移動端填坑記
本文介紹了html5 video 移動端填坑記,分享給大家,具體如下:
?12345678910111213141516171819202122232425262728 | < video id = "video" style = "object-fit:fill" autoplay webkit-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支援這種模式
?