带有自动播放功能的视频标签在 React 中不起作用

Question

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <video src="../public/One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>
    </div>
  );
}

export default App;

上面的代码是用npx create-react-app创建的，我只是碰巧给它添加了一个视频标签。

尽管页面已加载，但视频未播放或显示。起初，我认为可能是视频类型导致的，但正如您所见，海报属性就在那里。

所以我的下一个怀疑是视频标签。所以我将它放在一个 HTML 文件中，将它放在同一个文件夹中，并运行它与一个实时服务器，并设法让它工作。

现在我可以问你们为什么这对 React 不起作用？现在

但我实际上设法找到了一个伪解决方案。

<video src="./One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>

我刚刚更改了 src 属性。它奏效了。

note- I had the same video in my current directory as well.

但显然，我不想将我的资源放在 src 文件夹（当前文件夹）中。

所以我的问题是：如何将视频放在 public/or src 之外的任何其他文件夹中并使其正常工作？

Answer 1

我没有足够的声誉来发表评论，所以将其添加为答案。

请试试这个（在 /One-D.mp4 之前没有 .）：

<video src="/One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>

带有自动播放功能的视频标签在 React 中不起作用

Video tag with autoplay does not work in react

reactjs

html5-video

src