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

Question

好吧，尽管听起来违反直觉，但 muted 标签在某种程度上被忽略了；查看下面的片段，第一个是用react渲染的，第二个是常规html；使用开发工具检查它们，您会看到 不 上的 react 具有 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>

Answer 1

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