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

Posted 2023-02-21

技术标签:

【中文标题】React (HTML) 视频标签不会在移动设备上自动播放【英文标题】：React (HTML) video tag won't autoplay on mobile devices 【发布时间】：2020-04-11 18:01:22 【问题描述】：

我创建了一个 jsx 变量来将视频嵌入到我的 html 中。每个其他答案都说包括静音、默认静音和 playinline（我已经有了）。这些视频在我的电脑上的 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 变量应该是什么。

【问题讨论】：

我认为你应该使用autoPlay 而不是autoplay @bkm412 没用。我尝试了 autoplay="autoPlay"、autoPlay="autoplay" 和 autoPlay="autoPlay"。你说的是哪一个？ @bkm412 你的意思是哪一个，可能是我在尝试时搞砸了其他东西，或者存在缓存问题或其他问题，我不想在尝试时重复尝试所有三个测试这些单独的问题如果我没记错的话，移动设备上的默认行为是忽略自动播放以节省带宽。 @j08691 你能解释一下吗？我刚刚使用dangerouslySetInnerHTML 让它工作。我以前使用过 gif，但有些 gif 大约 20 MB，而且质量较低。相应的 mp4 最大约为 2 MB，大多数约为半 MB，而且质量更好，因此它似乎是一个更好的选择。另外，当它与 html 一起显示时，mp4 不是已经下载了吗？（它不是嵌入的 youtube 链接） 【参考方案1】：

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

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

【讨论】：

playsinline 道具有什么作用？使用“playsinline”后，移动浏览器将在视频原位播放视频，而不是默认播放，即在播放时全屏打开 - css-tricks.com/what-does-playsinline-mean-in-web-video @doublejosh 你想说什么？使用dangerouslySetInnerHTML，video的属性都应该是小写的，是html，而不是jsx【参考方案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 可能不是必需的，但以防万一，这对我有用。

【讨论】：

您能展示一下您是如何制作自定义组件的吗？我在处理这个项目时主要使用样式组件。为此，您需要在为组件创建样式的文件中从“styled-components”导入样式（基本上，使用 JSX 来设置样式而不是 CSS）。在评论中有很多解释，但是这个 tut 视频解释了如何使用 react styled-components：youtube.com/watch?v=Nl54MJDR2p8&t=1s【参考方案3】：

这为我解决了这个问题

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

如果你想使用带有小写字母的autoplay，你应该赋值autoplay="true"

Here 是用于测试的实时代码

【讨论】：

这可能是新的，当我问这个问题时，我认为这不起作用，所以我的回答可能已经过时了......如果有人能证实这一点，那就太好了 @Sam，这是一个演示代码，它显示了这一点以确认它。 codesandbox.io/s/vigorous-mahavira-uhb45【参考方案4】：

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

【讨论】：

视频显示出来了，用电脑的时候也在浏览器里播放，我觉得路径不会错