WeChat とアプリで自動的に再生される HTML5 ページのオーディオとビデオを実装する方法

ほとんどの H5 ページに、BGM の再生とビデオの再生機能が追加されました。では、自動再生を実装するにはどうすればよいでしょうか?以下では、WeChat とアプリの HTML5 ページにオーディオとビデオの自動再生を実装する方法を説明します

現在、ほとんどの H5 ページには BGM の再生とビデオの再生機能があります。では、自動再生を実装するにはどうすればよいでしょうか?

純粋な H5 ページは、携帯電話での自動再生を実現できません。また、多くのモバイル ブラウザは、再生のための play メソッドへの最初の js 呼び出しをサポートしていません (ユーザーが手動でクリックするだけです)。再生後に一時停止し、コードを使用して再生できます)。

これは主に、不必要な自動再生によるトラフィックの無駄を防ぐために行われます。

次のコードは、ユーザーの最初のタッチ後の再生と 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();   
    }   
}

以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。

関連おすすめ:

WeChat友達、QQ友達、QQスペースWeibo QRコードへの共有機能をHTML5で実装する方法

HTML5でBGM切り替えをボタンで制御する方法を実装する方法

以上がWeChat とアプリで自動的に再生される HTML5 ページのオーディオとビデオを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。