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 时，显然 'muted' 没有出现。节点看起来像这样。实际上缺少一些属性。

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

I'm reading something about the muted attributed not working with React? Someone made a component that looks like it's the video tag, but functioning how it's supposed to（至少在我的情况下，视频像 gif 一样播放）。我无法让它工作，它甚至不能在桌面上自动播放。我正在尝试 <VideoTag src={props.src} /> 因为我不知道他们的 poster 变量应该是什么。

Answer 1

我认为当你嵌入视频时一定要使用正确的路径

Answer 2

看起来 muted 在使用 React 时无法正常工作。我不得不使用一个叫做 dangerouslySetInnerHTML 的东西来让 muted 出现在组件中。

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

Answer 3

我刚遇到同样的问题，想分享我的解决方案，希望它能帮助其他人并节省您的时间和许多麻烦。

所以，我为视频创建了一个组件，并添加了 autoPlay 和 playsInline，特别注意大小写。

这是我使用的 JSX 代码：

<VideoBG 
    autoPlay={true} 
    loop={true}
    controls={false} 
    playsInline
    muted 
    src="../../videos/video4.mp4" 
    type="video/mp4" 
 />

这是我使用的样式（带样式的组件，但基本上 css）：

export const VideoBG = styled.video`
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
`;

={true} 可能不是必需的，但以防万一，这对我有用。

Answer 4

这帮我解决了

使用 autoPlay 而不是 autoplay 进行反应。
添加muted

如果要使用小写字母的autoplay，应该赋值为autoplay="true"

Here是测试用的活码

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

React (HTML) video tag won't autoplay on mobile devices

html

javascript

html5-video

reactjs

这帮我解决了