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

IT技术 html reactjs html5-video
2021-04-15 21:50:03

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

4个回答

它看起来像muted使用react过来的时候不能正常工作。我必须使用调用的东西dangerouslySetInnerHTML才能使静音显示在组件中。

var EmbedVideo = function(props) {
   return (
       <div dangerouslySetInnerHTML={{ __html: `
        <video
          loop
          muted
          autoplay
          playsinline
          src="${props.src}"
          class="${props.className}"
        />,
      ` }}></div>
   )
}
@doublejosh 你想说什么？用dangerouslySetInnerHTML，视频的属性应该都是小写的，是html，不是jsx
2021-06-04 21:50:03
playsinline 道具有什么作用？
2021-06-06 21:50:03
设置“playsinline”后，移动浏览器将在原处播放视频，而不是默认播放，即在播放时全屏播放 - css-tricks.com/what-does-playsinline-mean-in-网络视频
2021-06-11 21:50:03
大写字母 I
2021-06-14 21:50:03

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

所以，我为视频创建了一个组件并添加了autoPlayand 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}可能没有必要，但为了以防万一，这为我工作。

这为我解决了

  • 使用autoPlay代替autoplayreact。
  • 添加 muted

如果你想使用autoplay小写字母，你应该分配值autoplay="true"

这是用于测试的实时代码

这可能是新的，当我问这个问题时，我认为这不起作用，所以我的回答可能已经过时了......如果有人能证实这一点，那就太好了
2021-06-09 21:50:03
@Sam，这是一个演示代码，显示了这一点以确认它。codeandbox.io/s/vigorous-mahavira-uhb45
2021-06-16 21:50:03

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

视频显示出来了，用电脑的时候也能在浏览器里播放，我觉得路径应该不会错
2021-06-03 21:50:03
其它你可能感兴趣的问题
上一篇以编程方式重定向到react-router v6 中的路由的问题 下一篇ECMAScript 6 箭头函数