国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信h5頁(yè)面audio標(biāo)簽在ios下不能自動(dòng)播放

jsliang / 765人閱讀

摘要：背景介紹在一個(gè)頁(yè)面中當(dāng)用戶提交表單到后臺(tái)后臺(tái)返回的結(jié)果成功的話開始自動(dòng)播放背景音樂出現(xiàn)的問(wèn)題在安卓手機(jī)上正常中沒有反應(yīng)后來(lái)網(wǎng)上一番搜索后了解到時(shí)因?yàn)椴辉试S自動(dòng)播放音樂除非用戶做出了交互行為解決方案如果是在頁(yè)面剛加載就需要自動(dòng)播放音頻的話還是

背景介紹:在一個(gè)h5頁(yè)面中,當(dāng)用戶提交表單到后臺(tái),后臺(tái)返回的結(jié)果成功的話,開始自動(dòng)播放背景音樂

   出現(xiàn)的問(wèn)題:在安卓手機(jī)上正常,iOS中沒有反應(yīng)

后來(lái)網(wǎng)上一番搜索后了解到時(shí)因?yàn)閕OS不允許自動(dòng)播放音樂,除非用戶做出了交互行為

解決方案:
1.如果是在頁(yè)面剛加載就需要自動(dòng)播放音頻的話還是比較好辦的,可以利用微信提供的api來(lái)實(shí)現(xiàn)(應(yīng)該是內(nèi)部做了一些修改)

 // 通過(guò)config接口注入權(quán)限驗(yàn)證配置后, 在 ready 中 play 一下 audio
    function autoPlayAudio1() {
        wx.config({
            // 配置信息, 即使不正確也能使用 wx.ready
            debug: false,
            appId: "",
            timestamp: 1,
            nonceStr: "",
            signature: "",
            jsApiList: []
        });
        wx.ready(function() {
            document.getElementById("bgmusic").play();
        });
    }

參考:在 iOS 微信瀏覽器中自動(dòng)播放 HTML5 audio(音樂) 的正確方式

2.需要在某個(gè)特定的時(shí)機(jī)才播放背景音樂

既然iOS做了限制,那只能通過(guò)與用戶進(jìn)行交互實(shí)現(xiàn),利用給html添加touchstart事件在回調(diào)函數(shù)中播放就可以了,需要注意的是:

這里不能同通過(guò)jquery的trigger觸發(fā),要得到用戶真實(shí)的交互才會(huì)響應(yīng),因?yàn)橹恍枰|摸一次就可以了,所以可以用one方法注冊(cè)事件
                        audio.play(); //安卓手機(jī)可以直接播放
                    // 為iOS做兼容,為了保險(xiǎn)起見,觸摸事件都給他加上
                        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                            var noPlay = true;
                            $("html").one("touchstart",function(){
                                if(noPlay) {
                                audio.play();
                                noPlay = false;
                                }
                            })
                            $("html").one("touchmove",function(){
                                if(noPlay) {
                                audio.play();
                                noPlay = false;
                                }
                            })
                            $("html").one("touchend",function(){
                                if(noPlay) {
                                audio.play();
                                noPlay = false;
                                }
                            })

到這里背景音樂已經(jīng)可以播放了,但是對(duì)于用戶體驗(yàn)不夠好,如果我不觸摸頁(yè)面的話還是不會(huì)播放,如果你有更好的辦法,可以加我QQ:32319149 一起討論啊:)

參考文章:

H5案例分享：解決H5中背景音樂無(wú)法自動(dòng)播放問(wèn)題
解決iOS下音頻無(wú)法自動(dòng)播放

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/52004.html

相關(guān)文章

  • 微信h5頁(yè)面audio標(biāo)簽在ios下不能自動(dòng)播放

    摘要：背景介紹在一個(gè)頁(yè)面中當(dāng)用戶提交表單到后臺(tái)后臺(tái)返回的結(jié)果成功的話開始自動(dòng)播放背景音樂出現(xiàn)的問(wèn)題在安卓手機(jī)上正常中沒有反應(yīng)后來(lái)網(wǎng)上一番搜索后了解到時(shí)因?yàn)椴辉试S自動(dòng)播放音樂除非用戶做出了交互行為解決方案如果是在頁(yè)面剛加載就需要自動(dòng)播放音頻的話還是 背景介紹:在一個(gè)h5頁(yè)面中,當(dāng)用戶提交表單到后臺(tái),后臺(tái)返回的結(jié)果成功的話,開始自動(dòng)播放背景音樂 出現(xiàn)的問(wèn)題:在安卓手機(jī)上正常,iOS中沒有反...

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

  • 移動(dòng)端H5開發(fā)遇到的坑

    摘要：微信分享簽名錯(cuò)誤單頁(yè)應(yīng)用模式下微信分享一直提示簽名錯(cuò)誤按照微信官網(wǎng)文檔，已經(jīng)引入，正確的配置安全域名，后臺(tái)開發(fā)人員生成的簽名也通過(guò)微信簽名工具驗(yàn)證，但是前端的自定義分享一直報(bào)簽名錯(cuò)誤，沒有辦法自定義分享，如果確保了哪些基本配置沒有問(wèn)題，并且 微信分享簽名錯(cuò)誤invalid signature vue單頁(yè)應(yīng)用history模式下微信分享一直提示簽名錯(cuò)誤invalid signature ...

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

  • css前端初始化

    摘要：初入前端，若有不足歡迎指正頭部初始化標(biāo)簽問(wèn)題一般要添加背景音樂的話，我們的第一反應(yīng)就是使用標(biāo)簽，但是這里有一個(gè)坑。 前言 當(dāng)下移動(dòng)端橫行，平常我們做一些移動(dòng)端的項(xiàng)目，接觸最多的就是H5，雖然做移動(dòng)端不用兼容IE，但是 我們要兼容微信、app、ios、android... 今天就給寫幾個(gè)平常開發(fā)經(jīng)常會(huì)遇到的問(wèn)題以及解決辦法。 初入前端，若有不足 歡迎指正！ 頭部初始化 ...

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

  • css前端初始化

    摘要：初入前端，若有不足歡迎指正頭部初始化標(biāo)簽問(wèn)題一般要添加背景音樂的話，我們的第一反應(yīng)就是使用標(biāo)簽，但是這里有一個(gè)坑。 前言 當(dāng)下移動(dòng)端橫行，平常我們做一些移動(dòng)端的項(xiàng)目，接觸最多的就是H5，雖然做移動(dòng)端不用兼容IE，但是 我們要兼容微信、app、ios、android... 今天就給寫幾個(gè)平常開發(fā)經(jīng)常會(huì)遇到的問(wèn)題以及解決辦法。 初入前端，若有不足 歡迎指正！ 頭部初始化 ...

    寵來(lái)也 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<