视频无法在移动设备上播放 - React 应用程序

Question

我的 React 应用程序有一个视频背景。问题是视频无法在移动设备上播放。无论我在移动设备上使用哪种浏览器，它都是这样的：

我尝试了 3 个选项：

1)

<div dangerouslySetInnerHTML={{ __html: `
        <video
          loop
          muted
          autoplay
          playsinline
          src="${Video}"
        />,
      ` }}></div>

从这里开始

2.

      <video autoPlay loop muted src={Video} type='video/mp4'/>

没有任何效果... 有什么想法吗？

Answer 1

在 React 中，你必须使用驼峰式。因此，当您编写 autoplay 时，将其更改为 autoPlay 并且对于 playsInLine.

也是如此

       <video
          loop
          muted
          autoPlay
          playsInline
          src="${Video}"
        />

这里是html标签说明

-autoPlay: 自动播放视频

-loop：循环播放视频

-className: 在css

中使用它

-静音：将视频静音

-playsInline：适用于移动设备。它让视频播放 in-line，而不是强制全屏播放视频

视频无法在移动设备上播放 - React 应用程序

Video doesn't play on mobile - react application

mobile

responsive-design

reactjs