Comment implémenter l'audio et la vidéo d'une page HTML5 pour une lecture automatique sous WeChat et l'application

La plupart des pages H5 ont désormais pour fonction de lire de la musique de fond et de lire des vidéos. Alors comment implémenter la lecture automatique ? Ce qui suit vous explique comment implémenter la lecture automatique de l'audio et de la vidéo dans WeChat et des applications dans les pages HTML5

La plupart des pages H5 ont désormais pour fonction de lire de la musique de fond et de lire des vidéos. Alors comment implémenter la lecture automatique ?

Les pages Pure H5 ne peuvent pas réaliser la lecture automatique sur les téléphones mobiles. La plupart des navigateurs mobiles désactivent la fonction de lecture automatique de la vidéo et de l'audio. De plus, de nombreux navigateurs mobiles ne prennent pas en charge le premier appel js à la méthode de lecture (uniquement le). l'utilisateur clique manuellement sur la lecture, la met en pause, puis utilise le code pour la lire.)

Il s'agit principalement d'éviter qu'une lecture automatique inutile ne gaspille du trafic.

Le code suivant implémente la lecture après le premier contact de l'utilisateur et la lecture automatique sous l'application WeChat

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde. apprentissage. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser HTML5 pour réaliser la fonction de partage avec les amis WeChat, les amis QQ, le code QR Weibo de l'espace QQ

HTML5 implémente la méthode d'utilisation de boutons pour contrôler le commutateur de musique de fond

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!