html5 视频标签自动加载不起作用，如何在 chrome 或任何浏览器中自动加载

Question

在这个 HTML 视频标签中，自动播放不能正常工作，我不知道是什么问题，这里是显示视频的代码和链接。

<video controls autoplay id="header-video">
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

这是视频的链接

https://winmagictoys.com/hairdorables/

Answer 1

因为 Chrome 不允许在用户与网页交互之前加载自动播放媒体。因此，您需要添加一个带有静音的隐藏自动播放 iframe。

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>

您可以从这里获得静音文件https://github.com/anars/blank-audio/blob/master/250-milliseconds-of-silence.mp3 .

所以你的html代码应该是

<video controls autoplay id="header-video">
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>