如何在React.js中使用HTML video标签播放视频？

Question

有人知道为什么我的视频无法加载吗？它显示了播放器，但没有视频。

  class App extends Component {
  render() {
    return (
      <div className="App">
      <p>hello</p>
      <video width="750" height="500" controls >
      <source src="..Videos/video1.mp4" type="video/mp4"/>
     </video>
      </div>
    );
  }   
}

这是我的目录结构：

目录 React 应用

我尝试了建议中的方法：src="../Videos/video1.mp4"，但结果相同。

- user10211187

Answer 1

几天前我也遇到了同样的问题，但是我找到了使用原生React.JS风格解决此问题的方法。

对于您的情况，假设您想将本地视频导入到React应用中的项目文件中，则不要使用原生HTML语法，例如：

<video width="750" height="500" controls >
      <source src="./Videos/video1.mp4" type="video/mp4"/>
</video>

在我的项目中，原本对我没有起作用。因此，我稍微修改了下面的代码，它就完美地运行了。

您需要像导入其他npm软件包/模块一样将视频作为特定实体导入到React中

例如，在您的情况下，您需要进行以下轻微更改：

import React, { Component } from 'react'
import video from './Videos.video1.mp4'

class App extends Component {
  render() {
    return (
      <div className="App">
      <p>hello</p>
      <video width="750" height="500" controls >
      <source src={video} type="video/mp4"/>
     </video>
      </div>
    );
  }   
}

或者

import React, { Component } from 'react'
import video from './Videos.video1.mp4'

class App extends Component {
  render() {
    return (
      <div className="App">
      <p>hello</p>
      <video src={video} width="750" height="500" controls>
     </video>
      </div>
    );
  }   
}

不使用<source>标签同样也能很好地运行。

- Rahul Ahire

---

非常感谢！起初，我遇到了一个TypeScript错误，但是后来我使用了require而不是import，一切都运行得非常顺利！ - gignu

Answer 2

这可能由多种因素引起，主要是您的服务器配置。

假设您的服务器能够正确提供mp4文件，并且从my-app目录运行，则您应该通过在src属性的开头添加/来解决该问题：

<source src="/Videos/video1.mp4" type="video/mp4"/>

如果您使用create-react-app创建了项目，那么您需要在public目录下创建一个Videos文件夹，并将视频文件放在其中。因为默认情况下公共资源是从这里提供的。因此，请将视频文件放在my-app/public/Videos/video1.mp4中。之后请清除浏览器缓存，然后重建和重新加载应用程序。

- Dacre Denny

---

我正在使用从Github页面https://github.com/facebook/react创建的create-react-app自动生成的服务器。 - user10211187

它为什么不能加载文件？ - user10211187

请查看更新的答案，其中包含更详细的说明。 - Dacre Denny

太好了，它起作用了，谢谢！我把Videos文件夹放在public目录中，然后使用了这个目录：../public/../Videos/video1.mp4。 - user10211187

Answer 3

你漏写了一个向前斜杠 /。正确的应该是 <source src="../Videos/video1.mp4" type="video/mp4"/>

- Shakil Ahmed

---

这是您文件的正确相对路径。或者，您可以将Video文件夹放在公共目录中，并使用<source src="/Videos/video1.mp4" type="video/mp4"/>。控制台是否显示任何错误？ - Shakil Ahmed

Answer 4

您可以使用'require'函数，如下所示：

<video width="auto" height="auto" autoplay>
  <source src={require('../assets/video.mp4')} type="video/ogg"/>
Your browser does not support the video tag.
</video>

- Nipun Gupta

Answer 5

我在React.js中导入了视频，对我来说很有效。

import video from "./video.mp4";

- subhajit das