自动播放 HTML5 视频

Posted 2023-05-07

【中文标题】自动播放 HTML5 视频

【英文标题】：Autoplay HTML5 video

【发布时间】：2021-11-25 05:18:52

【问题描述】：

我正在尝试将 ios Safari 上的 html5 视频元素设置为在页面加载时自动播放。

我知道视频只能由用户事件触发。这是我的场景。

例如，我在/videos.html 上有一个视频列表。该视频列表有一个播放按钮，可将用户带到/videos/my-video.html

我不希望用户在此 URL 上再次单击“播放”。在我看来，他们已经从上一页触发了用户事件。

我这里有什么选择吗？

【问题讨论】：

浏览器有目的地阻止这种行为。

你不应该这样做

我理解为什么浏览器会这样做，但在这种情况下，用户已经提交了一个事件来播放视频，只是从另一个页面

每次页面加载都会重置条件，所以解决方法很简单：不要离开页面来播放视频，使用模式或类似的东西。

【参考方案1】：

使用“自动播放”属性在页面加载时播放视频。在 /videos.html 中播放按钮的单击事件中，将此属性动态添加到 HTML 视频元素。您也可以使用“静音”属性默认静音播放视频。

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