前端视频无法自动播放的问题，基于Chrome浏览器的自动播放策略原理，详细解释加了autoplay属性之后视频仍然不能自动播放的问题，并提供了二种主流的解决方法

置顶

Lee哈

已于 2024-09-19 19:31:05 修改

阅读量1.2w

点赞数 30

分类专栏： html 前端 javascript 文章标签：前端音视频 chrome

于 2023-06-14 18:22:37 首次发布

本文链接：https://blog.csdn.net/m0_64642443/article/details/131212842

版权

文章介绍了Chrome浏览器的自动播放策略，旨在保护用户体验。策略包括静音模式下的自动播放和媒体参与度考量。当用户未与网站交互或媒体参与度不足时，视频无法自动播放。解决方案包括引导用户交互和先静音播放。提供了JavaScript代码示例来应对这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，什么是Chrome浏览器的自动播放策略？（原理讲解，懂了原理解决问题就会非常简单）

试问一下，如果你正在上班摸鱼准备刷抖音或者B站时，但是忘记了调小声音或是忘记了带耳机，突然的视频声音放出来会不会让你特别尴尬，旁边可都是人看着呢，而且你要是放了个正常的视频还好，不然的话，纯纯大社死有咩有。

所以呢，在2018年Chrome就提出了这种自动播放的策略，主要是为了照顾用户的体验感。

媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。Chrome基于这个媒体参与度有一套自己算法，我们可以通过：chrome://media-engagement/ 查看

就使用一个盒子里面放一个video标签并且加上autoplay属性

<div class="box">
    <video src="./img/_12084f25eab2e6978b505b0520b978b-1-64.MP4" autoplay></video>
  </div>

可以看到虽然我们设置了autoplay属性但是视频还是不能播放（如果你能播放，你可以试着刷新几次看看，他就不能自动播放了，具体原因暂且未知，总之我们必须要保证它每次都能按照我们的需求来才行）

这时我们可以看一下控制台有没有报错

可以看到控制台是已经报错了，这个报错信息大