Add a video to a ReactJS app and make it visible on the view

Question

I am currently generating a landing page, and I have been trying to figure it out how to add a video in multiple formats (for browser compatibility)

I am new in the ReactJS world, your help will be truly appreciated!

Here is my code:

I generated a component for the video (I'm not sure if this is the best thing I could do)

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;

And I have also this file that is where I want to place the 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;

Of course, this way of doing it is giving me zero results, so what would it be the best way to make the video appear on my landing page?

Answer 1

This should work,

Change <video> tag of Video component to

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

Change <Content>'s <video src={Video} autoPlay="true" /> to

<Video />

Answer 2

This should work...Add the different formats as sources in the video-tag

<Video width="320" height="240" controls>
   <source src={video1}>
   <source src={video2}>
   <source src={video2}>
</Video>