CODEWITHSUNDEEP
javascriptreactjshtml5-videoecmascript-6jsx
Liondancer
Liondancer

Reputation: 16469

ReactJS component HTML5 video

I am trying to have have video in my web page using HTML <video> tag using ReactJS and JSX. Right now nothing is playing even though my component has the path to the file

IntroVideo this.props:

{
  introVideo: "assets/media/Cherngloong_website_intro_Uz921bT.mp4",
  muted: "true"
}

Component:

class IntroVideo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        return(
            <div>
                <video className="video-container video-container-overlay" autoPlay="true" loop muted={ this.props.muted }>
                    <source src={ this.props.introVideo } type="video/mp4" />
                </video>
            </div>
        );
    }
}

Here is what I see in the developer tools:

<video class="video-container video-container-overlay" autoplay="" loop="" muted="" data-reactid=".0.1.0.0">
    <source type="video/mp4" data-reactid=".0.1.0.0.0" src="assets/media/Cherngloong_website_intro_Uz921bT.mp4">
</video>

In the developer tools, if I right click the src value and click on "Open link in new tab", the video would play in the new tab. So I believe it the path to the file is correct.

I am doing the same thing for another Component but it is for an image and it works fine:

About this.props:

{
  aboutImg: "assets/media/The_Lion_Dances_Celebrate_Happy_New_Year_Clipart.jpg"
}

Component:

class About extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        return(
            <div id="about-container">
                <div id="about-img-container">
                    <img src={ this.props.aboutImg } alt="about_img"/>
                </div>
                <div id="about-text-container">
                    <p>
                        Message
                    </p>
                </div>
            </div>
        );
    }
}

Developer Tools:

<div id="about-container" data-reactid=".0.1.1">
    <div id="about-img-container" data-reactid=".0.1.1.0">
        <img alt="about_img" data-reactid=".0.1.1.0.0" src="assets/media/The_Lion_Dances_Celebrate_Happy_New_Year_Clipart.jpg">
    </div>
    <div id="about-text-container" data-reactid=".0.1.1.1">
        <p data-reactid=".0.1.1.1.0">Message</p>
    </div>
</div>

Upvotes: 7

Views: 43977

Answers (4)

Veena Katti
Veena Katti

Reputation: 36

put the video in the public/videos folder and write the src as below

Upvotes: 0

mingxingwang
mingxingwang

Reputation: 339

In that case, I add the "?" at the end of the video url and it acts well. I got the same case with the url by using the video in aws s3 bucket. So I used the url as "assets/media/Cherngloong_website_intro_Uz921bT.mp4?"

Upvotes: 0

Charles
Charles

Reputation: 255

Video React

a Component for playing video would be a better option as it has lots of customisation

Upvotes: 0

Timothy Kanski
Timothy Kanski

Reputation: 1888

It looks like a bad path. The generated html seems to be fine. I tested it here:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

The video rendered fine, and all I did was change the src.

<video className="video-container video-container-overlay" autoPlay="" loop="" muted="" data-reactid=".0.1.0.0">
  <source type="video/mp4" data-reactid=".0.1.0.0.0" src="mov_bbb.mp4">
</video>

Upvotes: 2

Related Questions