React中<video>标签布尔属性autoplay不生效问题：为何仅写autoplay无效，设autoplay="true"才有效？

这个问题我之前踩过坑，当时也纳闷为啥同样是布尔属性，hidden能用简写，autoplay就不行，后来翻了React文档和浏览器的自动播放规则才搞明白其中的门道。

为啥autoplay简写不生效，hidden却可以？ #

首先得明确：React对不同类型的布尔属性处理逻辑有细微差异，再加上浏览器对媒体自动播放的严格限制，才导致了这种看似矛盾的情况：

• 对于hidden这类通用布尔属性，React的处理完全贴合原生HTML规则：只要在JSX里写出属性名（比如<div hidden>），React就会渲染成原生的<div hidden>标签，浏览器只要看到属性存在，就会执行对应的行为（隐藏元素），所以简写完全有效。
• 而autoplay属于媒体元素专属属性，情况就不一样了：虽然React文档里说布尔属性可以用简写（仅写属性名等价于={true}），但实际渲染时，部分浏览器/React版本会把简写的autoplay识别为“未明确赋值的布尔状态”，再加上浏览器本身对自动播放有严格校验（比如必须静音、无用户交互限制等），就可能出现不生效的情况。而当你写成autoplay="true"时，React会把它作为字符串属性传递给DOM，浏览器只要检测到autoplay属性存在（不管值是什么），就会触发自动播放逻辑——刚好你已经加了muted，满足了静音要求，所以就生效了。

React中布尔属性的正确写法 #

React官方推荐的布尔属性写法有两种：

• 简写形式：直接写属性名，比如<video autoplay muted>，这等价于autoplay={true}、muted={true}，适合不需要动态控制的场景。
• 显式赋值形式：明确写autoplay={true}，这种方式更清晰，尤其是需要根据组件状态动态控制属性时（比如<video autoplay={isAutoPlayEnabled} muted>），是React中最稳妥的写法。

解决你遇到的问题的小建议 #

如果简写的autoplay不生效，试试这两个办法：

1. 改用显式布尔赋值：<video autoplay={true} muted src="/vids/vid.mp4">，这既符合React规范，也能避免浏览器的识别差异。
2. 确认满足所有自动播放条件：除了加muted={true}，还要确保视频本身没有音频，或者代码强制静音，同时页面没有其他脚本阻止自动播放。

内容的提问来源于stack exchange，提问作者Abraham