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

【问题标题】：Video doesn't play on mobile - react application视频无法在移动设备上播放 - 反应应用程序
【发布时间】：2022-03-23 05:00:30
【问题描述】：

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

我尝试了 3 个选项：

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

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

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

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

【问题讨论】：

标签： reactjs mobile responsive-design

【解决方案1】：

在 React 中，你必须使用 camelCase。因此，当您编写 autoplay 时，请将其更改为 autoPlay，playsInLine 也是如此。

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

这里是html标签说明

-autoPlay：自动播放视频

-loop：循环播放视频

-className: 在css中使用它

-静音：将视频静音

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

【讨论】：