好吧,尽管听起来违反直觉,但 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>
最佳答案
这实际上是一个known issue自 2016 年以来一直存在。 视频将正确静音,但不会在 DOM 中设置该属性。 您可以在 GitHub 问题中找到多种解决方法,尽管其中任何一个都可能各有利弊。
关于javascript - 为什么 React 中视频标签上的 `muted` 属性被忽略?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61510160/