在H5頁面中嵌入視頻的情況是比較多件的,有時(shí)候會(huì)碰到需要自動(dòng)播放的情況,之前根本覺得這不是問題,但是自己的項(xiàng)目中需要視頻的時(shí)候就有點(diǎn)sb了,達(dá)不到老板的要求,那個(gè)急呀~~~
各種查資料,找到一個(gè)方法,記錄一下。核心是監(jiān)聽了canplaythrough事件,然后自己去讓視頻play()。
在這個(gè)過程中還發(fā)現(xiàn),ios和安卓不一樣,安卓上需要設(shè)置muted才能自動(dòng)播放,ios沒這個(gè)限制,當(dāng)然,多媒體播放政策呢,廠商也一直在調(diào)整,需要關(guān)注。
還有就是有時(shí)候視頻也可能有問題,導(dǎo)致不能自動(dòng)播放,之前就是碰到了這個(gè)坑(在iphone8 plus,安卓上正常,但是在iPhone X,XR上不能自動(dòng)播放),調(diào)了半天不行,最后發(fā)現(xiàn)視頻的問題,日了狗了,
我這里還區(qū)分了安卓和ios,因?yàn)榘沧咳敛粌H丑,二期你直接返回呢不是退出視頻,而是退出頁面了,這個(gè)很蛋疼,ios的視頻就挺好的,系統(tǒng)自帶有操作按鈕
所以安卓上取消了所有的控制按鈕,ios就放開了按鈕
<video v-show="os!=='iOS'" class="video" preload="auto" autoplay loop muted webkit-playsinline="true" playsinline="true" @loadstart="videoLoadStart" @canplaythrough="videoLoaded" poster="./images/cover.png" ref="videoEle" id="android" > <source :src="src" type="video/mp4"> </video> videoLoaded(){ this.$refs.videoEle.play(); }說道視頻,還有一個(gè)問題,之前碰到過,就是切換不同的tag然后切換視頻,發(fā)現(xiàn)吧視頻路徑寫在source里面,就像上面那樣是有問題的,直接把連接寫在video里面,就像下面這樣:
<video ref="video" id="video" preload="metadata" :src="videoSrc[videoIndex]" :poster="preSrc[videoIndex]" webkit-playsinline playsinline></video>data(){preSrc:[ require("./images/pre1.png"), require("./images/video-pre.jpg")],videoSrc:[ require("./images/invader-video.mp4"), require("./images/brithday.mp4")],}到此這篇關(guān)于html5中嵌入視頻自動(dòng)播放的問題解決的文章就介紹到這了,更多相關(guān)html5嵌入視頻自動(dòng)播放內(nèi)容請搜索武林網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持武林網(wǎng)!
新聞熱點(diǎn)
疑難解答
圖片精選