html5_video&audio的autoplay屬性失效的解決方法

目錄

• autoPlay屬性失效的原因
• 通過誘使用戶與頁面交互使音頻自動播放
• 通過添加靜音屬性muted來自動播放視頻
• 一個失敗的方法————通過添加iframe標簽來獲取頁面自動播放權限

autoPlay屬性失效的原因

chrome 66以上的版本為了避免多媒體標簽產生隨機噪音，規定了不為靜音的標簽不能自動播放，需手動觸發開始播放，標簽定義為靜音(muted: true)才可以自動播放
強行調用play方法會報錯
當用戶與頁面交互時允許調用play方法

通過誘使用戶與頁面交互使音頻自動播放

• CSS:

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            user-select: none;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        #main {
            position: relative;
            height: 100%;
        }

        #music {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            border-radius: 5px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -250px;
            margin-left: -250px;
        }

        #audio1 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -27px;
            margin-left: -150px;
            outline: 0;
        }

        #loading {
            width: 100%;
            height: 100%;
            z-index: 50;
            background-color: lightcoral;
            position: relative;
            opacity: 0.5;
        }

        #btn {
            width: 150px;
            height: 50px;
            border: 1px solid black;
            background-color: white;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: absolute;
            top: 30%;
            left: 50%;
            margin-top: -25px;
            margin-left: -75px;
            outline: 0;
        }

        #btn:hover {
            border: 1px solid white;
            background-color: black;
            box-shadow: 3px 3px 5px grey;
            color: white;
        }
    </style>

• HTML:

    <div id="main">
        <div id="loading">
            <button id="btn">歡迎來到XX頁面</button>
        </div>
        <div id="music">
            <audio src="音頻文件.mp3" preload="auto" loop controls id="audio1"
                autoplay></audio>
        </div>
    </div>

• javascript:

        window.onload = function () {
            var oLoading = document.querySelector('#loading');
            var aBnt = oLoading.querySelector('#btn');
            var oAudio1 = document.querySelector('#audio1');
            var onoff = true;
            showLoading();

            function showLoading() {
                aBnt.addEventListener('click', loadingChange, false);

                function loadingChange() {
                    oLoading.parentNode.removeChild(oLoading);
                    if (oAudio1.paused) {
                        oAudio1.play();
                    }
                }
            }
        }

• 演示
  
• video同上允許通過頁面交互來自動播放

通過添加靜音屬性muted來自動播放視頻

    <video src="視頻文件.mp4" muted autoplay controls></video>

一個失敗的方法————通過添加iframe標簽來獲取頁面自動播放權限

    <iframe src="music.mp3" allow="autoplay" style="display: none;"></iframe>
    <audio controls></audio>
    <script>
        var ifm = document.getElementsByTagName('iframe')[0];
        var ado = document.getElementsByTagName('audio')[0];
        ifm.onload = function () {
            ado.src = "music.mp3";
            ado.oncanplay = function () {
                if (ado.paused) {
                    ado.play();
                }
            }
        }
    </script>

以上方法在網絡上流傳很廣，但事實上已經失效。