React (HTML) 视频标签不会在移动设备上自动播放

Question

我创建了一个 jsx 变量来将视频嵌入到我的 html 中。其他每个答案都说要包括

• muted
• defaultMuted， 和
• playsinline

（我已经有了）。

---

这些视频在我的电脑上的 safari、chrome 和 firefox 中自动播放，但在移动设备上却不能。

视频的开始屏幕已加载，但已暂停。

因为我使用的是 React，所以我可能需要做一些稍微不同的事情吗？

---

• 我使用的是 iOS 13.3 的 iPhone，
• 自动播放不适用于 Safari、Chrome 和 Firefox，仅适用于移动设备。
• 视频都是.mp4（.mov 文件也不起作用）。

var EmbedVideo = function(props) {
     return (
     <video webkit-playsinline playsinline autoplay="autoplay" className={props.className} muted defaultMuted loop>
            <source src={props.src} type="video/mp4" />
            Your browser does not support the video tag.
        </video>
    )
}

---

更新

因此，当我检查网站的 html 时，显然“静音”并没有出现。该节点看起来像这样。实际上缺少一些属性。

    <video autoplay="" class="video" loop="">
    <source src="/videos/my_video.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>

我正在读一些关于静音属性不适用于 React 的内容？有人制作了一个看起来像视频标签的组件，但它的功能却像它应该的那样（至少在我的例子中，视频像 gif 一样播放）。但我无法让它工作，它甚至不能在桌面上自动播放。我尝试只是<VideoTag src={props.src} />因为我不知道他们的poster变量应该是什么。

Answer 1

使用 React 时似乎muted无法正常工作。我必须使用名为 的东西dangerouslySetInnerHTML才能使静音显示在组件中。

var EmbedVideo = function(props) {
   return (
       <div dangerouslySetInnerHTML={{ __html: `
        <video
          loop
          muted
          autoplay
          playsinline
          src="${props.src}"
          class="${props.className}"
        />,
      ` }}></div>
   )
}