前言

　　手機(jī)自帶瀏覽器的H5播放器 真是百花齊放?。ǜ鱾€(gè)手機(jī)廠家有各個(gè)廠家的控件UI）

需求

　　手機(jī)瀏覽器木有控件條 自動播放 全屏處理 監(jiān)控進(jìn)度條 快進(jìn)后退

自動播放

　　自動播放就給跪了

　　ios 安卓 為了不浪費(fèi)用戶的流量。移動端是不允許自動播放視頻 播放聲音的

　　方案： 比較的好的辦法是，引導(dǎo)用戶觸發(fā)，滑屏或touch的行為，然后調(diào)用video.play()播放，給用戶一個(gè)自動播放的錯(cuò)覺。

全屏處理

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

快進(jìn)后退

　　video.currentTime
　　完美解決

video播放的控制

　　

　　在移動端有一些坑需要注意，不要輕易使用媒體元素的除’ended’,’timeupdate’以外event事件，在不同的機(jī)子上可能有不同的情況產(chǎn)生，例如：

　　ios下監(jiān)聽 'canplay'和'canplaythrough' （是否已緩沖了足夠的數(shù)據(jù)可以流暢播放）,當(dāng)加載時(shí)是不會觸發(fā)的，即使preload=”auto”也沒用，但在pc的chrome調(diào)試器下和android下，是會在加載階段就觸發(fā)。ios需要播放后才會觸發(fā)。

　　

android下的播放控件條不可以去掉

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

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

　　

　　將就一點(diǎn)吧（沒辦法，這篇文章 我想繼續(xù)寫下去）

　　

　　

　　　　　　

　　fannie式總結(jié)

　　嘗試引用第三方插件

　　比如：video.js vue-video-player

　　控件條不能去掉 也不能完全自動播放（也要用戶主動觸發(fā)一下）

　　絕不絕望 ，驚不驚喜 拜拜咯 （我去老板那里 跪鍵盤去了）

　　

　　

　　

總結(jié)

以上是生活随笔為你收集整理的H5——video百花齐放（浏览器自带的播放器）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。