HTML5 视频自动播放，声音未静音

问题描述 投票：0回答：1

我需要在我的网站上实现本地自动播放视频。不过，我知道较新的浏览器，即 Chrome、Mozilla 和 Safari，会在视频没有“静音”属性时阻止自动播放。 所以， 有没有什么方法可以通过 HTML 或 Javascript 中的任何技巧自动播放 HTML5 中的视频（有声）？ 因为，当我删除“静音”属性时，浏览器将停止自动播放视频。

这是我使用的简单 HTML5 代码：

<body>
<div class="video-wrapper">
<video autoplay muted loop playsinline preload="metadata">
  <source src="EDMVideo(Jay)_NEW.webm">
</video>
</div>
</body>
javascript html video browser autoplay
1个回答
3
投票

编辑

添加一个“hacky”解决方案： 基本上，该政策的意思是用户必须在播放音频之前与网站互动。

有了这个假设，我们可以通过两种方式自动播放有声视频：

第一个，也是对用户最公平的一个，是创建一个登录页面，当他必须在其中与您的网站交互才能开始使用它或单击表示他允许您播放声音的内容时。

第二个（还有一点更“hacky”的）是添加一个不可见的

iframe
和一个.mp3文件（这将是无声的）和
allow autoplay
。这将欺骗浏览器自动播放任何后续视频，即使它未静音。

看起来像这样：

<iframe src="https://olafwempe.com/mp3/silence/silence.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<video autoplay muted loop playsinline preload="metadata">
  <source src="EDMVideo(Jay)_NEW.webm">
</video>

对于 Electron - 你需要绕过自动播放策略：

  app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required")

不幸的是，没有真正的解决方案。它旨在保护用户，并且没有解决方法。 有些浏览器可以自动播放声音。但对他们中的大多数人来说，这是行不通的，这很好！

自 2018 年 4 月起，除非发生以下情况之一，否则您无法在 chrome 上自动播放声音（如 google 的自动播放政策 所示）：

  • 始终允许静音自动播放。
  • 在以下情况下允许自动播放声音：
    • 用户与域进行了交互（单击、点击等）。
    • 在桌面上，用户的媒体参与指数阈值已 交叉，表示用户之前播放过有声视频。
    • 在移动设备上，用户已将该站点添加到他或她的主屏幕。
    • Top frames 可以将自动播放权限委托给它们的 iframe 以允许 自动播放声音。

你可以阅读更多相关信息在这里

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.