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 patibility)

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

Here is my code:

I generated a ponent 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>Wele 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?

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 patibility)

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

Here is my code:

I generated a ponent 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>Wele 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?

• javascript
• html
• css
• reactjs

4 Answers 4

This should work,

Change <video> tag of Video ponent to

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

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

<Video />

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>

    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>Wele to</small> <br />
              Profile Pulse
            </PageHeader>
          </div>
        );
      }
    }

export default Content;

import "./Training.css";
import Video from "../../img/myvideo.mp4"

const Training = () => {
  return (
    <>
      <div className="container-fluid p-0">
        <video id="bannerVideo" autoPlay muted loop>
          <source src={Video} type="video/mp4" />
        </video>
      </div>
    </>
  );
};

export default Training;