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

正如@FluidSense所提到的，这是一个长期存在的漏洞。
我可以这样做：

import React, { useRef, useEffect } from "react";

export default function Video({ src, isMuted }) {
    const refVideo = useRef(null);

    useEffect(() => {
        if (!refVideo.current) {
            return;
        }

        if (isMuted) {
            //open bug since 2017 that you cannot set muted in video element https://github.com/facebook/react/issues/10389
            refVideo.current.defaultMuted = true;
            refVideo.current.muted = true;
        }

        refVideo.current.srcObject = src;
    }, [src]);

    return (
            <video
                ref={refVideo}
                autoPlay
                playsInline //FIX iOS black screen
            />
    );
}

下面是我如何使用dangerouslySetInnerHTML处理它的：

import React, { Component } from "react";

export default class VideoComponent extends Component {
  state = {
    videoStr: "",
  };
  componentDidMount() {
    const { src } = this.props;
    const videoStr = `
        <video autoplay loop muted>
            <source src=${src} type="video/mp4" />
        </video>
    `;
    this.setState({ videoStr });
  }
  render() {
    return (
      <div
        className={this.props.className}
        dangerouslySetInnerHTML={{ __html: this.state.videoStr }}
      />
    );
  }
}

如果键入muted="true"，muted就可以工作。

我还想指出的是，一些浏览器，如Chrome，可能对视频文件大小有限制。我在自己的网站上运行自己的视频，当我检查页面并在Sources下查找时，我没有找到我使用过的视频。这迫使我进一步调查。我意识到我正在运行的视频大约是10.4mb。这是大相对于通常的有效载荷的一个网站，所以我降低了大小到5MB左右，视频出现在我的网站上。
关于我寻找解决方案的步骤的其他信息是，我使用我的本地主机运行我的React应用程序。我还在Safari上运行我的React应用程序，它令人惊讶地显示了我的视频，即使大小是10.4mb。我猜浏览器对视频大小有不同的标准。

我遇到了同样的问题，所以我创建了一个自定义HTML元素来添加静音视频。

class MutedVideo extends HTMLVideoElement {
  constructor() {
    super();
    this.muted = true;
    // I also noticed that you used autoplay, so I added it too.
    this.autoplay = true;
  }
}

customElements.define("x-muted", MutedVideo, { extends: "video" });

这是视频预览。

// Notice how I removed the muted and autoPlay props and added the 'is' prop

function VideoPreview() {
  return (
    <video
      is="x-muted"
      width="320"
      height="240"
      controls
      src="https://raw.githubusercontent.com/rpsthecoder/h/gh-pages/OSRO-animation.mp4"
    >
      Sorry, your browser does not support the HTML video tag
    </video>
  );
}

Here是一个工作演示