ReactJS component HTML5 video

Question

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>

What specifically isn't working? Have you tried autoplay="autoplay" instead, or added controls="controls" so that you can click the video to start it? — loganfsmyth
– loganfsmyth, Commented Apr 30, 2016 at 1:10
Looks like in JSX it's supposed to be autoplay with no value, or autoplay={true} — loganfsmyth
– loganfsmyth, Commented Apr 30, 2016 at 2:47
@loganfsmyth tried autoPlay and autoPlay={true} no luck =[ — Liondancer
– Liondancer, Commented Apr 30, 2016 at 8:18
So what specifically isn't working? Can you see the preview image, but it won't play? Did you try my first set of suggestions? — loganfsmyth
– loganfsmyth, Commented Apr 30, 2016 at 16:15
@loganfsmyth I tried your suggestions and no success =[ I cannot see any video at all. As if there is no src Here is what I see on my browser and dev tools: postimg.org/image/b0u3swswh postimg.org/image/ccg3pz9ld — Liondancer
– Liondancer, Commented May 1, 2016 at 6:37

meDeepakJain · Accepted Answer · 2019-11-18 08:43:49Z

2

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>

edited Nov 18, 2019 at 8:43

meDeepakJain

1641 silver badge14 bronze badges

answered Apr 29, 2016 at 23:32

Timothy Kanski

1,88816 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charles · Accepted Answer · 2020-08-19 16:01:27Z

0

Video React

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

answered Aug 19, 2020 at 16:01

Charles

2552 silver badges5 bronze badges

Comments

mingxingwang · Accepted Answer · 2020-12-18 06:25:10Z

0

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?"

answered Dec 18, 2020 at 6:25

mingxingwang

3471 gold badge9 silver badges20 bronze badges

Comments

Veena Katti · Accepted Answer · 2021-01-21 18:43:55Z

0

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

answered Jan 21, 2021 at 18:43

Veena Katti

365 bronze badges

Collectives™ on Stack Overflow

ReactJS component HTML5 video

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related