具有自动播放功能的视频标签在反应中不起作用

Posted 2023-05-08

【中文标题】具有自动播放功能的视频标签在反应中不起作用

【英文标题】：Video tag with autoplay does not work in react

【发布时间】：2021-08-20 04:18:47

【问题描述】：

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

function App() 
  return (
    <div className="App">
      <header className="App-header">
        <img src=logo className="App-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创建的，我正好给它加了一个video标签。

虽然页面加载了视频，但没有播放或显示。 起初，我认为可能是视频类型导致了这种情况，但正如您所见，海报属性就在那里。

所以我的下一个怀疑是视频标签。 所以我把它放在一个 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 属性。 并且成功了。

注意-我的当前目录中也有相同的视频。

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

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

【参考方案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>

【讨论】：

是的，它是这样工作的，但我想将视频放在 src 文件夹之外

@kevingodfrey 默认 webpack 配置中的 publicPath 是否已更改？也就是说，您是否使用像 http://localhost:3000 这样的 URL 访问您的 React 应用程序？如果是这样，上述解决方案应该可以工作，因为src 指的是http://localhost:3000/One-D.mp4，而http://localhost:3000/One-D.mp4 又指的是放在public 文件夹中的视频文件。

知道了，我以为是从 src 文件夹中获取视频！无论如何，如果我要创建另一个文件夹，则在 src 外部表示静态并与公共并行。我可以从那里调用资源吗？

然后你需要对 webpack 配置进行更改以提供来自 static 文件夹的文件。