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

Question

我目前正在生成登录页面，我一直在试图弄清楚如何以多种格式添加视频（用于浏览器兼容性）

我是ReactJS世界的新手，真的很感谢你的帮助！

这是我的代码：

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

import React, { Component } from "react";
import video1 from "./video/vd1.mp4";
import video2 from "./video/vd2.ogv";
import video3 from "./video/vd3.webm";

class Video extends Component {
  render() {
    return (
      <div>
        <video src={video1} />
      </div>
    );
  }
}

export default Video;

我还有这个文件，我想放置视频：

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;

当然，这样做的方法是给我零结果，那么将视频显示在我的目标网页上的最佳方法是什么呢？

Answer 1

    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;

Answer 2

这应该工作，

将视频组件的<video>标记更改为

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

将<Content>的<video src={Video} autoPlay="true" />改为

<Video />