Javascript 将视频添加到ReactJS应用程序，并使其在视图中可见

我目前正在生成一个登录页，我一直在尝试找出如何添加多种格式的视频（为了浏览器兼容性）

我是新来的，非常感谢你的帮助

这是我的密码：

我为视频生成了一个组件（我不确定这是否是我能做的最好的事情）

import React，{Component}来自“React”；
从“/video/vd1.mp4”导入video1；
从“/video/vd2.ogv”导入video2；
从“/video/vd3.webm”导入video3；
类视频扩展组件{
render（）{
返回(
);
}
}
导出默认视频；

我还有一个文件，就是我想放视频的地方：

import React, { Component } from "react";
import { PageHeader } from "react-bootstrap";
import Video from "./Video";

class Content extends Component {
  render() {
    return (
      <div>
        <PageHeader className="title">
          <video src={Video} autoPlay="true" />
          <small>Welcome to</small> <br />
          Profile Pulse
        </PageHeader>
      </div>
    );
  }
}

export default Content;

import React，{Component}来自“React”；
从“react bootstrap”导入{PageHeader}；
从“/Video”导入视频；
类内容扩展组件{
render（）{
返回(
欢迎来到

轮廓脉冲
);
}
}
导出默认内容；

当然，这种方法不会给我任何结果，那么让视频出现在我的登录页上的最佳方法是什么呢？

import React，{Component}from“React”；
    import React, { Component } from "react";
    import { PageHeader } from "react-bootstrap";
    import Video from "./Video";

    class Content extends Component {
      render() {
        return (
          <div>
            <PageHeader className="title">
              <Video />  //Here just call your Video Component
              <small>Welcome to</small> <br />
              Profile Pulse
            </PageHeader>
          </div>
        );
      }
    }

export default Content;

从“react bootstrap”导入{PageHeader}；
从“/Video”导入视频；
类内容扩展组件{
render（）{
返回(
//这里只需调用您的视频组件
欢迎来到

轮廓脉冲
);
}
}
导出默认内容；

这应该行得通

将视频组件的标签更改为

<video src={video1} width="600" height="300" controls="controls" autoplay="true" />

将

的

更改为

<Video />

非常感谢！我试过了，但视频仍然没有显示出来，这可能是因为格式的原因吗？我知道，因为我以前在使用HTML和CSS时也这样做过，为了与浏览器兼容，我还插入了其他格式，这些格式是：ogv和webm，你认为这可能有助于视频的显示吗，以及如何在组件中实现？首先尝试使用图像，如果这种结构适用于图像，它肯定适用于视频。但是图像的结构会是怎样的呢？不使用图像，导入图像就像在视频组件中导入视频一样，其他的将是相同的，只使用图像而不是视频，如果图像显示为in-out，这也适用于视频

<Video />