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 app，而不是将原生HTML语法用于例如：

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

对于我来说，这对我的项目没有帮助。因此，我仅按照以下方式对代码进行了少许修改，即可正常工作。

您需要将视频作为特定实体导入，以进行反应，就像如何导入其他npm软件包/模块一样

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

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>标签的情况下也可以很好地工作

Answer 2

您错过了斜杠P=... perl -ane' BEGIN { %h = map { $_ => 1 } split /\|/, $ENV{P} } print if $h{$F[3]}; ' 15AM171H0N15000GAJK5。应该是/

Answer 3

这可能是由于许多因素引起的，即服务器的配置。

假设您的服务器能够正确提供mp4文件，并且正在my-app目录中运行，那么您应该可以通过在{的开头添加/来解决此问题。 {1}}属性：

src

如果您是通过<source src="/Videos/video1.mp4" type="video/mp4"/>创建项目的，那么您将要在create-react-app目录下创建一个Videos文件夹，并将视频文件放在此处，这就是默认情况下会提供公共资产。

因此，将视频文件放在public中。然后清除浏览器缓存，然后重建并重新加载您的应用。

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>

Answer 5

我在 react.js 中导入视频，这对我有用。

import video from "./video.mp4";

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

5 个答案: