gpt4 book ai didi

javascript - HTML5 视频自动播放,声音未静音

转载 作者:行者123 更新时间:2023-12-05 04:37:17 32 4
gpt4 key购买 nike

我需要在我的网站上实现本地自动播放视频。不过,我知道较新的浏览器,即 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>

最佳答案

编辑

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

根据这个假设,我们可以通过两种方式自动播放有声视频:

第一个,也是对用户最公平的一个,是创建一个登陆页面,当他必须在其中与您的网站互动才能开始使用它或点击一些内容时他允许你播放声音。

第二个(还有一点“hacky”)是添加一个带有.mp3 file 的不可见iframe (那将是无声的)和允许自动播放。这将欺骗浏览器自动播放任何后续视频,即使它未静音也是如此。

它看起来像这样:

<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>

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

自 2018 年 4 月起,除非发生以下情况之一(如 google's autoplay policy 所示),否则您无法在 chrome 上自动播放声音:

  • 始终允许静音自动播放。
  • 在以下情况下允许有声自动播放:
    • 用户已与域进行交互(点击、点击等)。
    • 在桌面设备上,用户的媒体参与指数阈值为交叉,表示用户之前播放过有声视频。
    • 在移动设备上,用户已将网站添加到他或她的主屏幕。
    • 顶级框架可以将自动播放权限委托(delegate)给它们的 iframe 以允许自动播放声音。

您可以阅读更多相关信息 here

关于javascript - HTML5 视频自动播放,声音未静音,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70719678/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com