音频和视频自动播放问题

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力

视频自动播放

使用video播放mp4时，如果没有自动播放，原因是因为浏览器禁止视频附带的音乐在没有用户操作的前提下自动播放，以防止打扰用户

解决方案

• 1、给video标签内增加 muted 属性 <video muted preload="auto" autoplay loop='loop' src='x.mp4' />，告知浏览器静音播放
• 2、增加一个按钮或全屏监听click事件,让用户主动点击后调用play()

音频自动播放

同理，由于浏览器禁止了自动播放，严格来说是没有任何方法能100%绕过的，见 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

解决方案

• 1、设置chrome打开自动播放
  • 在windows下可以增加启动属性以打开 chrome.exe --disable-features=AutoplayIgnoreWebAudio
  • mac下目前无解，我的chrome版本为79+
• 2、AudioContext 成功率50% 直接上代码

      var context = new window.AudioContext();  
      var source = null;  
      var audioBuffer = null;  
      function loadAudioFile(url) {  
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);  
        xhr.responseType = 'arraybuffer';  
        xhr.onload = function(e) {
            initSound(this.response);  
        };  
        xhr.send();  
      }  

      function initSound(arrayBuffer) {  
        context.decodeAudioData(arrayBuffer, function(buffer) {
            audioBuffer = buffer;  
            playSound();  
        }, function(e) {
            console.log('Error decoding file', e);  
        });  
      } 

      function playSound() {  
          source = context.createBufferSource();  
          source.buffer = audioBuffer;  
          source.loop = true;  
          source.connect(context.destination);  
          source.start(0);
          console.log('开始播放')
          
      }

• 3、iframe 成功率50%

<iframe src='bgm.wav' allow='autoplay'  style="opacity:0">