乐趣区

关于chrome:Chrome浏览器的自动播放限制策略

客户:为什么明明我设为自动播放了,却无奈自动播放?
我:#@$%^#~
客户:为什么其余浏览器能够自动播放,Chrome 浏览器不能主动播,您们产品有问题 …
我:^$&^(&^(*%

好吧,我终于找到本源了,分享给大家:

摘录 1:Chrome 自动播放限度的考量

As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit publishers with legitimate use cases.
————————————————

正如您可能曾经留神到的,Web 浏览器正在朝着更严格的自动播放策略倒退,以改善用户体验,最大限度地缩小装置广告拦挡程序的动机,并缩小低廉的数据流量耗费。这些更改旨在为用户提供更大的播放控制权,并使领有非法用例的视频发布者受害。

摘录 2:Chrome 的自动播放政策

Chrome’s autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
The user has interacted with the domain (click, tap, etc.).
On desktop, the user’s Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
————————————————

  • 静音自动播放总是容许的。
  • 在下列状况下容许应用声音自动播放:
  • 用户曾经与域进行了交互(点击,tap 等)。
  • 在桌面上,用户的媒体参加指数阈值 (MEI) 已被越过,这意味着用户以前播放带有声音的视频。
  • 在挪动设施上,用户已将该网站增加到主屏幕。
  • 顶部框架能够将自动播放权限授予其 iframe 以容许自动播放声音。
var promise = document.querySelector('video').play();
 
if (promise !== undefined) {
  promise.then(_ => {// Autoplay started!}).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}
<video id="video" muted autoplay>
<button id="unmuteButton"></button>
 
<script>
  unmuteButton.addEventListener('click', function() {video.muted = false;});
</script>
退出移动版