HTML5頁面音視頻在微信和app下自動播放的實現(xiàn)方法
發(fā)布時間：2016-10-20 11:07:41 作者：佚名 
我要評論
我要評論現(xiàn)在大部分的H5頁面都有實現(xiàn)播放背景音樂，播放視頻功能。那怎么實現(xiàn)自動播放呢？下面小編給大家?guī)砹薍TML5頁面音視頻在微信和app下自動播放的實現(xiàn)方法
現(xiàn)在大部分的H5頁面都有實現(xiàn)播放背景音樂，播放視頻功能。那怎么實現(xiàn)自動播放呢？
純H5頁面在手機端中是無法實現(xiàn)自動播放，移動端瀏覽器大部分是禁用video和audio的autoplay功能并且，很多移動瀏覽器也不支持首次js調(diào)用play方法進行播放（只有用戶手動點播放后暫停，然后用代碼進行play可以）。
這樣做主要是為了防止不必要的自動播放浪費流量。
以下代碼是實現(xiàn)用戶第一次觸摸后實現(xiàn)的播放和微信app下自動播放
XML/HTML Code復制內(nèi)容到剪貼板
- function autoPlayMusic() {
- /* 自動播放音樂效果，解決瀏覽器或者APP自動播放問題 */
- function musicInBrowserHandler() {
- musicPlay(true);
- document.body.removeEventListener('touchstart', musicInBrowserHandler);
- }
- document.body.addEventListener('touchstart', musicInBrowserHandler);
- /* 自動播放音樂效果，解決微信自動播放問題 */
- function musicInWeixinHandler() {
- musicPlay(true);
- document.addEventListener("WeixinJSBridgeReady", function () {
- musicPlay(true);
- }, false);
- document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
- }
- document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
- }
- function musicPlay(isPlay) {
- var media = document.getElementById('myMusic');
- if (isPlay && media.paused) {
- media.play();
- }
- if (!isPlay && !media.paused) {
- media.pause();
- }
- }
以上所述是小編給大家介紹的HTML5頁面音視頻在微信和app下自動播放的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
html5視頻自動橫過來自適應頁面且點擊播放功能的實現(xiàn)
這篇文章主要介紹了h5視頻自動橫過來自適應頁面且點擊播放,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-03- 本文通過實例代碼給大家介紹了HTML5聲音錄制/播放功能，非常不錯，具有參考借鑒價值，需要的朋友跟隨腳本之家小編一起學習吧2018-05-03
- 這篇文章主要介紹了HTML5 解決蘋果手機不能自動播放音樂問題的相關(guān)資料,需要的朋友可以參考下2017-12-27
- 這篇文章主要介紹了有關(guān)HTML5中背景音樂的自動播放功能的相關(guān)資料,需要的朋友可以參考下2017-10-16
短視頻已經(jīng)無數(shù)不在了，但是主體還是使用 app 來承載的，本文講述 H5 如何實現(xiàn) app 的視頻滑動體驗，本文對實現(xiàn)過程中踩到的坑做一個總結(jié)，結(jié)合示例代碼給大家介紹的非常詳2023-01-05
