静音自动播放视频在Safari 11.0中停止播放

5 回答

• 0

  我也遇到了这个问题，因为在网站的背景下播放的短mp4 . 通过使用 controls="true" 和 playsinline 限定视频标签，我能够获得适用于iOS Safari 11的解决方案而无需JS .

  例：

  <video autoplay loop playsinline muted controls="true" src="~/background.mp4" type="video/mp4"></video>
  

  Note: 野生动物园不像我一样，并且挣扎的时间超过你想承认的时间 .

  回复于 2024-04-28T04:09:03+08:00
• 1

  是的，似乎Safari也阻止静音视频（甚至没有声音）......

  我找到了一个解决方法，但它并不漂亮，我并不为此感到骄傲：

  var ua = navigator.userAgent.toLowerCase();
  var is_safari = (ua.indexOf("safari/") > -1 && ua.indexOf("chrome") < 0);
  if(is_safari) {
      var video = document.getElementById('#video-element-id');
      setTimeout(function() {
         video.play();
      }, 50);
  }
  

  我已经尝试过这样做而没有超时，但Safari通过抛弃Promise拒绝来拒绝这一点 . 我不知道为什么......

  回复于 2024-04-28T04:09:03+08:00
• 5

  我发现最可靠的方法是确保：

  • 页面上至少有一个用户交互（chrome mobile）
    标签上的
  • 静音属性（全部）
    标签上的
  • playsinline属性（safari）

  看起来像这样：

  <style>
    video {
      display: none;
    }
    video.active {
      display: block;
    }
  </style>
  <button id="button">Show video</button>
  <video id="video" muted playsinline></video>
  <script>
      var button = document.getElementById('button');
      var video = document.getElementById('video');
      button.addEventListener('click', function() {
          video.className = 'active';
          video.src = url;
          video.play();
      });
  </script>
  

  回复于 2024-04-28T04:09:03+08:00
• 1

  我遇到了类似的问题并用canplaythrough事件（或canplay事件）解决了它 . 这可能解决了Abayob解决方案中对setTimeout的需求：

  const video = document.getElementById('#video-element-id');
  video.oncanplaythrough = function() {
      video.play();
  }
  

  回复于 2024-04-28T04:09:03+08:00
• 0

  将 src 属性放在<video>中，而不是使用<source>

  <video src="video_url.mp4" width="100%" poster="poster_url.png" autoplay loop muted playsinline></video>
  

  使用<source>，只有当页面加载时元素在视图中时才有效（在safari 11.0上测试）

  Auto-Play Policy Changes for macOS的链接 .

  回复于 2024-04-28T04:09:03+08:00