So implementieren Sie HTML5-Seiten-Audio und -Video für die automatische Wiedergabe unter WeChat und der App

Die meisten H5-Seiten verfügen mittlerweile über die Funktion, Hintergrundmusik und Videos abzuspielen. Wie implementiert man also die automatische Wiedergabe? Im Folgenden erfahren Sie, wie Sie die automatische Wiedergabe von Audio und Video auf HTML5-Seiten unter WeChat und Apps implementieren

Die meisten H5-Seiten verfügen jetzt über die Funktion, Hintergrundmusik und Videos abzuspielen. Wie implementiert man also die automatische Wiedergabe?

Reine H5-Seiten können die automatische Wiedergabe von Video und Audio nicht realisieren. Darüber hinaus unterstützen viele mobile Browser nicht den ersten js-Aufruf der Wiedergabemethode Der Benutzer klickt manuell auf die Wiedergabe, pausiert sie und verwendet dann Code, um sie abzuspielen.)

Dies dient hauptsächlich dazu, zu verhindern, dass unnötige automatische Wiedergabe Datenverkehr verschwendet.

Der folgende Code dient dazu, die Wiedergabe nach der ersten Berührung des Benutzers und die automatische Wiedergabe unter der WeChat-App zu implementieren

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();   
    }   
}

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für alle hilfreich sein Lernen, mehr Bitte beachten Sie die PHP-Chinese-Website für verwandte Inhalte!

Verwandte Empfehlungen:

Wie man HTML5 verwendet, um die Funktion des Teilens für WeChat-Freunde, QQ-Freunde, QQ-Space-Weibo-QR-Code zu realisieren

HTML5 implementiert die Methode der Verwendung von Tasten zur Steuerung des Hintergrundmusikwechsels

Das obige ist der detaillierte Inhalt vonSo implementieren Sie HTML5-Seiten-Audio und -Video für die automatische Wiedergabe unter WeChat und der App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!