javascript - 为什么在React中视频标签上的`muted`属性会被忽略？

好吧，虽然听起来有点违反直觉，但muted标签却以某种方式被忽略了。查看下面的代码段，
第一个是用react渲染的，第二个是常规html的；用您的开发工具检查它们，您会看到对它的反应没有muted属性；我已经尝试过muted={true}，muted="true"，但是无法正常工作。

function VideoPreview() {
  return (
    <div className="videopreview-container">
      React tag:
      <video
        className="videopreview-container_video"
        width="320"
        height="240"
        controls
        autoPlay
        muted
      >
        <source src="https://raw.githubusercontent.com/rpsthecoder/h/gh-pages/OSRO-animation.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
  );
}

ReactDOM.render(<VideoPreview />, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>


<hr/>
Regular html:
<video
  width="320"
  height="240"
  controls
  autoplay
  muted
>
  <source src="https://raw.githubusercontent.com/rpsthecoder/h/gh-pages/OSRO-animation.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

最佳答案

这实际上是自2016年以来一直存在的known issue。
视频将被正确静音，但不会在DOM中设置该属性。
您可以在GitHub问题中找到多种解决方法，尽管其中任何一种都有优缺点。