在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)
疑難解答
圖片精選
