Question

我创建了一个jsx变量，将视频嵌入到html中。每隔一个答案都说要包括静音，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>

I'm reading something about the muted attributed not working with React？有人制作了component that looks like it's the video tag, but functioning how it's supposed to（至少在我看来是像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>
   )
}

Answer 2

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

因此，我为视频创建了一个组件并添加了 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 3

我认为当您嵌入视频时，请确保使用正确的路径

React（HTML）视频标签无法在移动设备上自动播放

3 个答案: