H5——video百花齊放（瀏覽器自帶的播放器）

前言

　　手機自帶瀏覽器的H5播放器 真是百花齊放啊（各個手機廠家有各個廠家的控件UI）

需求

　　手機瀏覽器木有控件條 自動播放 全屏處理 監控進度條 快進後退

自動播放

　　自動播放就給跪了

　　ios 安卓 爲了避免浪費用戶的流量。移動端是不容許自動播放視頻 播放聲音的

　　方案： 比較的好的辦法是，引導用戶觸發，滑屏或touch的行爲，而後調用video.play()播放，給用戶一個自動播放的錯覺。

 

全屏處理

　　方案：中間頁面 豎屏樣式，提醒用戶橫屏 

快進後退

　　video.currentTime

　　完美解決

 

video播放的控制

　　

　　在移動端有一些坑須要注意，不要輕易使用媒體元素的除’ended’,’timeupdate’之外event事件，在不一樣的機子上可能有不一樣的狀況產生，例如：

　　ios下監聽 'canplay'和'canplaythrough' （是否已緩衝了足夠的數據能夠流暢播放）,當加載時是不會觸發的，即便preload=」auto」也沒用，但在pc的chrome調試器下和android下，是會在加載階段就觸發。ios須要播放後纔會觸發。

　　

android下的播放控件條不能夠去掉

　　個人pc 端是這樣的 （video 控制是吧 控件去掉的）

　　這可咋整啊，我測試用的視頻 是咱們公司的，打碼有很差看，從新測試我又懶得測了（陷入恐慌）

　　

　　將就一點吧（沒辦法，這篇文章 我想繼續寫下去）

　　

　　

 

　　　　　　

     

　　fannie式總結

　　嘗試引用第三方插件

　　好比：video.js vue-video-player

　　控件條不能去掉 也不能徹底自動播放（也要用戶主動觸發一下）

　　毫不絕望 ，驚不驚喜 拜拜咯 （我去老闆那裏 跪鍵盤去了）