时间戳

首页 > 解决方案 > html5 视频标签自动加载不起作用，如何在 chrome 或任何浏览器中自动加载

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

问题描述

在这个 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/

标签： htmlcss

解决方案

因为在用户与网页交互之前，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>

推荐阅读