Chrome视频自动播放

Question

最近Chrome和Firefox的更新已不再支持自动播放视频 - 我尝试添加一些代码在启动时播放它，但似乎没有起作用?

    var vid = document.getElementById("attractor"); 

    function playVid() { 
        vid.play(); 
    } 

有人找到了解决此问题的方法吗？

我们做了很多触摸屏互动，并且依赖这种方法来制作吸引人的视频。

- alib0ng0

Answer 1

autoplay 只有在默认情况下指定为 muted 才能工作，像这样。

    <video autoplay muted>
      <source src="video.mp4" type="video/mp4"></source>
   </video>

不用担心，用户可以通过html5视频元素的一部分取消静音。

- Sabba Keynejad

---

也适用于 Vimeo！只需在嵌入的 URL 后添加 ?autoplay=1&muted=1 即可！ :-) - OZZIE

Answer 2

我找到了一种不会在控制台中报错的自动播放视频的好方法。

const myVideo = document.getElementById('my-video');

// Not all browsers return promise from .play().
const playPromise = myVideo.play() || Promise.reject('');
playPromise.then(() => {
  // Video could be autoplayed, do nothing.
}).catch(err => {
  // Video couldn't be autoplayed because of autoplay policy. Mute it and play.
  myVideo.muted = true;
  myVideo.play();
});

<video id="my-video" src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_2mb.mp4">

这段代码尝试启用带声音的自动播放，如果不可能，则将视频静音并自动播放。我认为这是一种最优的方式，并且可以防止JS错误。

- Eugene

Answer 3

根据我的观察和像这篇文章这样的许多文章，现在Chrome会阻止未静音的视频自动播放。启用声音的视频只能通过用户交互（例如鼠标点击或触摸轻击）才能播放，并且不能由JavaScript启动。

通过这样做，Google希望“(使)自动播放更符合用户期望，[...] 让用户更加掌控音频”[1]。

- Tom Doodler

Answer 4

1. 将allow="autoplay;"添加到您的iframe中，就像这样：<iframe allow="autoplay;" ... >
2. 使用html5 video标签时，我注意到视频必须静音才能自动播放。有声音的视频不想播放。以下是如何嵌入html5视频https://www.w3schools.com/html/html5_video.asp。如果使用此方法，您可以下载Miro视频转换器http://www.mirovideoconverter.com/。使用它来编码您的视频。它在缩小视频方面做得非常好！
3. 在嵌入youtube或vimeo时，将?autoplay=1添加到URL中，并在vimeo中还要添加autopause=0，就像这样：https://player.vimeo.com/video/{video_id}?autoplay=1&loop=1&autopause=0,
4. 如果仍然遇到问题，请使用iframe API https://developers.google.com/youtube/iframe_api_reference并使用javascript播放视频：

function onPlayerReady(event) {
   event.target.playVideo();
}

5. 当使用iframe和youtube视频时，请记得使用嵌入式URL，而不是标准视频URL：https://www.youtube.com/embed/{video_id}
6. Youtube视频管理器在这里：https://www.youtube.com/my_videos（我永远找不到在不断变化的界面中的Youtube视频管理器！）

推荐解决方案：

1. 在vimeo上注册，上传您的视频
2. 进入视频设置，找到“嵌入”选项卡https://vimeo.com/manage/{video_id}/embed并设置您的嵌入视频
3. 嵌入您的iframe：

<iframe frameborder="0"
  height="100%"
  width="100%"
  id="background-video"
  src="https://player.vimeo.com/video/356828095?autoplay=1&loop=1&autopause=0"
  allow="autoplay; fullscreen">
</iframe>

这个可以自动播放和循环。 4. 使用css设置您的视频大小，例如 width: 100%。 5. 现在您不想在视频周围有黑色边框，因此让我们调整iframe的大小，使高度与宽度成比例。 在我的情况下，视频是1920x1080像素：

<script type="text/javascript">
var width = window.innerWidth;
var height = (width * 1080) / 1920

document.getElementsByTagName('iframe')[0].style.height = height + 'px';
</script>

我的视频在页面背景中循环播放。我通过以下方式禁用了鼠标事件（在您的CSS样式中）：

#background-video {
  pointer-events: none;
}

如果我漏掉了什么，请告诉我，我会更新这些说明！

- mate.gvo

Answer 5

我已经想通了...在地址栏中输入以下内容：

chrome://flags/#autoplay-policy

选择“无需用户手势”，这样显然只能在您的计算机上运行！

- alib0ng0

---

我们依赖这种方法来制作我们的吸引人的视频，显然在本地计算机上启用自动播放对OP没有任何帮助。 - Tom Doodler

Answer 6

我刚刚花了七天七夜重新编写YouTube的代码，只是因为这些自动播放的问题。谷歌坚决忽略对Chrome的所有更改。

https://developer.chrome.com/blog/autoplay/

并且基于 Chrome 的浏览器（个人使用 Edge 115）不能正确实现自动播放限制。首先，让我们尝试一些简单的东西：

<video controls = "" class="video-stream html5-main-video" style="width: 480px; height: 640px" src="file:///c:/copy/1.mp4"></video>

播放：

Document.prototype.getElementsByTagName.call(document, "video")[0].play()

如果在策略中将"AutoplayAllowed"设置为0，视频将不会自动播放。经过一番努力，我终于写下了这段话。

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE]

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies]

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft]

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge]
"AutoplayAllowed"=dword:00000000

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge\AutoplayAllowlist]
"1"="file:///*"
"2"="https://www.youtube.com"

现在本地视频可以播放，但是对于YouTube进行自动播放的例外，我对此感到不好。此外，出于纯粹的学术兴趣，让我们试试禁用YouTube的自动播放。以下是发生的情况（请记住，谷歌以巨大的浮夸声称会保护Chrome用户免受自动播放等骚扰）：

• 如果你通过地址栏打开YouTube视频的链接，视频将不会播放

• 如果你已经打开了一个YouTube页面，并点击页面上的视频/短片视频，新打开的视频将会播放

• 如果你在Chrome中添加了一个指向包含视频的页面的YouTube书签并打开它：

  • 如果你在使用书签时当前正处于一个YouTube页面，视频将会播放

  • 如果你在使用书签时当前不是处于一个YouTube页面，视频将不会播放在被打开的页面上

如果你在YouTube上打开一个视频，并且该视频因为Chrome的自动播放限制或者你篡改了它们的代码而暂停（否则它将自动播放），当你第一次进入视频全屏模式时，视频会突然开始播放，非常烦人。我找到了执行这种操作的代码（在desktop_polymer_enable_wil_icons.js中），这就是谷歌的逻辑，他们认为如果用户将视频全屏，他也打算立即播放。

如果你打开一个YouTube Shorts页面，并且第一个短片视频由于Chrome的限制而无法播放，如果你在没有手动播放第一个视频的情况下向下滚动页面，所有后续的短片视频都会出现问题（事件监听器缺失，短片视频上的播放按钮可用，但点击短片视频背景没有任何反应）。显然，谷歌的左手不知道右手在做什么。

底线：如果你想防止自动播放，你必须自己重新编写代码，将其注入到页面中，或通过浏览器代理将其重定向到你自己的脚本。

- WRFan

Answer 7

我有两个解决方案，不需要任何属性或iframe，也可以自动播放带声音的音频/视频，请跟随我：

1. WebRTC 解决方案：

navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
    vid.play(); // play your media here then stop the stream when done below...
    stream.getTracks().forEach(function (track) { track.stop(); });
});

它会要求用户的 麦克风权限，他们必须点击一次“允许”按钮，然后您才被允许播放任何有声音或无声音的东西。这是有效的，因为只要您正在捕获任何内容，就可以播放所有内容。来源: autoplay-restrictions-and-webrtc

2. 手动解决方案: 如果出于某种原因，用户不想给予麦克风权限，那么你只需要说服他们，让他们相信你只需要此权限来自动播放媒体，与他们的麦克风没有关系，因为一旦媒体开始播放，你就会立即停止麦克风。 否则，请指示他们从您的网站设置中允许声音权限，这也将永久授予访问带或不带声音播放媒体的权限。

经过连续两天的搜索，差点放弃自动播放音频/视频的希望，我想出了这两个简单的解决方案，可以在没有任何用户手势的情况下正常工作。我希望它能解决谷歌部署新的严格政策后发生的任何自动播放相关问题。阅读更多：autoplay-policy-changes

- MD. MAHFUZ HOSSAIN