成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

video標(biāo)簽自動(dòng)播放問(wèn)題

Jeff / 1256人閱讀

摘要：臨時(shí)接了個(gè)非常緊急的首頁(yè)開屏廣告的活動(dòng)，然后開始找源碼開始該以前的活動(dòng)每年偶爾會(huì)有幾次這種活動(dòng)都是直接套模板，然后因?yàn)橄嚓P(guān)人員都離職了，模板丟失，模板使用做的播放，但是有的瀏覽器判斷有問(wèn)題，比如某狐，然后因?yàn)椴シ乓粋€(gè)大屏的廣告視頻，所以決定

臨時(shí)接了個(gè)非常緊急的首頁(yè)開屏廣告的活動(dòng)，然后開始找源碼開始該以前的活動(dòng)（每年偶爾會(huì)有幾次這種活動(dòng)都是直接套模板），然后因?yàn)橄嚓P(guān)人員都離職了，模板丟失，模板使用flash做的播放，但是有的瀏覽器判斷flash有問(wèn)題，比如某狐，然后因?yàn)椴シ乓粋€(gè)大屏的廣告視頻，所以決定用video標(biāo)簽來(lái)直接做，然后發(fā)現(xiàn)了以下問(wèn)題（本文章僅在mac上發(fā)現(xiàn)這個(gè)問(wèn)題，windows未嘗試）

video標(biāo)簽加上自動(dòng)播放autoplay發(fā)現(xiàn)在chrome、火狐瀏等覽器上都不會(huì)自動(dòng)播放

 var id = "narnia"
 var videoUrl = "http://xxxxx.mp4"
 var width = "1280"
 var height = "680"
 var tempHtml = ``

查了好多原因，發(fā)現(xiàn)是瀏覽的問(wèn)題，因?yàn)関ideo可能加載各種視頻，自動(dòng)播放會(huì)有一定的不安全性。還有的說(shuō)chrome怕聲音突然出來(lái)，嚇到你，不管是什么原因反正造成了以上問(wèn)題反正就是不能播放

然后搜了一下解決方法，比如說(shuō)去 chrome://flags/#autoplay-policy 設(shè)置成 no user gesture is required 就好了等等，我想說(shuō)我一個(gè)用戶還要去設(shè)置這個(gè)那你還寫這個(gè)有什么用，用戶只關(guān)心好不好用而已

然后最后在其他的答案中找到一項(xiàng)，在視頻標(biāo)簽中加上 muted 就可以，然后嘗試了一下的確是可以了，但是這個(gè)標(biāo)簽是靜音，都靜音了那我的自動(dòng)播放其實(shí)也沒(méi)啥用，然后查了各種其他解決辦法問(wèn)了好幾個(gè)大神然后都沒(méi)有其他辦法，然后想了一下折中的辦法：

因?yàn)闊o(wú)法自動(dòng)播放必須要求用戶去主動(dòng)觸發(fā)播放才能播放，然后加上muted可以靜音自動(dòng)播放

可以給用戶加一個(gè)靜音按鈕，然后這個(gè)靜音做的功能是取消靜音+播放

為什么要加上播放呢，因?yàn)槟慵由蟤uted隨便自動(dòng)播放了，但是你要把這個(gè)屬性取消了，會(huì)再次回到暫停，立馬取消播放

function openVoice() {
    var videoPlayer = document.getElementById("homeVideo")
    videoPlayer.muted = false
    videoPlayer.play()
}

這個(gè)方法先去關(guān)閉靜音，然后再調(diào)用了播放方法，這樣就算是用戶觸發(fā)了播放就可以正常播放了，這樣也算折中的解決了自動(dòng)播放的問(wèn)題，找了半天實(shí)在是沒(méi)有找到其他辦法，屬在下才疏學(xué)淺，如果其他人有好的解決辦法請(qǐng)指教！真心求教?。。?/p>

ps. 加上muted就可以自動(dòng)播放，看來(lái)瀏覽器怕聲音突然出來(lái)，嚇到你這個(gè)還是挺接近的

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106764.html

相關(guān)文章

  • 關(guān)于 video 播放的新探索

    摘要：使用標(biāo)簽這是關(guān)于給出的基本用例。其實(shí)我們也是在這種背景下研究出來(lái)新的技術(shù)問(wèn)題解決清晰度無(wú)縫切換的。這樣之前說(shuō)的所有成本問(wèn)題都不存在，還能做到相同體驗(yàn)的無(wú)縫切換。所有代碼來(lái)自帶解析器能節(jié)省流量的西瓜播放器 前端同學(xué)要使用 HTML5 播放器視頻，必然會(huì)使用 video 標(biāo)簽，不過(guò)大多數(shù)同學(xué)只是使用了較簡(jiǎn)單的功能，其實(shí)它本身?yè)碛胁环仓τ写覀儼l(fā)現(xiàn)。 首先，我們先來(lái)看下 video 最基礎(chǔ)...

    Shihira 評(píng)論0 收藏0

  • 手機(jī)瀏覽器自動(dòng)播放視頻video（設(shè)置autoplay無(wú)效）的解決方案

    摘要：參考鏈接禁止自動(dòng)播放后，有什么比較好的方法實(shí)現(xiàn)的自動(dòng)播放嗎微信自動(dòng)播放視頻可交互，設(shè)置層級(jí)，無(wú)控制條，非視頻下安裝系統(tǒng)安裝使用音視頻播放和常見的坑處理在微信和瀏覽器中不全屏播放解決 1、問(wèn)題的提出 某一天接了個(gè)需求，需要在手機(jī)的H5頁(yè)面內(nèi)加入視頻，我開開心心做完，準(zhǔn)備交付的時(shí)候，問(wèn)題來(lái)了，PM想要用戶一進(jìn)入頁(yè)面，視頻就開始播放，不需要用戶手動(dòng)點(diǎn)擊。 2、嘗試解決 加autoplay 視...

    fyber 評(píng)論0 收藏0

  • 手機(jī)瀏覽器自動(dòng)播放視頻video（設(shè)置autoplay無(wú)效）的解決方案

    摘要：參考鏈接禁止自動(dòng)播放后，有什么比較好的方法實(shí)現(xiàn)的自動(dòng)播放嗎微信自動(dòng)播放視頻可交互，設(shè)置層級(jí)，無(wú)控制條，非視頻下安裝系統(tǒng)安裝使用音視頻播放和常見的坑處理在微信和瀏覽器中不全屏播放解決 1、問(wèn)題的提出 某一天接了個(gè)需求，需要在手機(jī)的H5頁(yè)面內(nèi)加入視頻，我開開心心做完，準(zhǔn)備交付的時(shí)候，問(wèn)題來(lái)了，PM想要用戶一進(jìn)入頁(yè)面，視頻就開始播放，不需要用戶手動(dòng)點(diǎn)擊。 2、嘗試解決 加autoplay 視...

    UsherChen 評(píng)論0 收藏0

  • 手機(jī)瀏覽器自動(dòng)播放視頻video（設(shè)置autoplay無(wú)效）的解決方案

    摘要：參考鏈接禁止自動(dòng)播放后，有什么比較好的方法實(shí)現(xiàn)的自動(dòng)播放嗎微信自動(dòng)播放視頻可交互，設(shè)置層級(jí)，無(wú)控制條，非視頻下安裝系統(tǒng)安裝使用音視頻播放和常見的坑處理在微信和瀏覽器中不全屏播放解決 1、問(wèn)題的提出 某一天接了個(gè)需求，需要在手機(jī)的H5頁(yè)面內(nèi)加入視頻，我開開心心做完，準(zhǔn)備交付的時(shí)候，問(wèn)題來(lái)了，PM想要用戶一進(jìn)入頁(yè)面，視頻就開始播放，不需要用戶手動(dòng)點(diǎn)擊。 2、嘗試解決 加autoplay 視...

    Jinkey 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<