javascript - 如何使用 html 视频标签在 react.js 中播放视频？

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>
    );
  }   
}

这是我的目录结构:

Directory React App

我按照建议尝试了这个:src="../Videos/video1.mp4" 我得到了相同的结果

Answer 1

几天前我也遇到了同样的问题，但我找到了用原生 React.JS 样式解决这个问题的原始方法。

对于您的场景，假设您想将项目文件中的本地视频导入 React 应用程序，然后，而不是使用 native 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> 的情况下也能正常工作标签