HTML5 <video> element not working in React js

Question

I have converted an HTML template to React js and now I am not able to play the video, have give the attribute autoPlay="true". Still its not working. Can anyone please help me with this?

Below is my video-player code:

       return(
            <div>
                <video width="400" controls autoPlay="true">
                <source src="mov_bbb.mp4" type="video/mp4"/>
                <source src="mov_bbb.ogg" type="video/ogg"/>
                Your browser does not support HTML video.
            </video>
            <p>
            Video courtesy of 
            <a href="<network url of video>" target="_blank">Video is Playing</a>.
            </p>
            </div>
        );

The player is opening but none of the controls are working nor the video is playing. Did I miss to add any package or tag>? Please let me know.

This might help: stackoverflow.com/questions/52399034/…

Murli Prajapati
– Murli Prajapati

2021-04-20 08:18:19 +00:00
Commented Apr 20, 2021 at 8:18 — Murli Prajapati
– Murli Prajapati, Commented Apr 20, 2021 at 8:18

Goutham J.M · Accepted Answer · 2021-04-21 05:25:11Z

4

Chrome stops auto play of all video having audio turned on so you add muted attribute , also add playsinline attribute to play in safari

<video width="400" controls autoPlay={true} muted playsInline >
                <source src="mov_bbb.mp4" type="video/mp4"/>
                <source src="mov_bbb.ogg" type="video/ogg"/>            
</video>

edited Apr 21, 2021 at 5:25

answered Apr 20, 2021 at 12:00

Goutham J.M

2,23421 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

HTML5 <video> element not working in React js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related