react js html5 video not working

Question

I tried searching on stack overflow and google but found no article that could help me. It shows a paused video even though i have used autoplay. Can anyone please help me ? I'm new to react.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import * as ReactBootstrap from 'react-bootstrap';
import coverimg from './hw.jpg';
import covervid from './hw.mp4';
import covervidtwo from './hw.ogv';


class Slider extends Component {
  render() {
    return (
      <div className="">

               <video  loop autoplay>
                   <source src= { covervid } type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
                   <source src={ covervidtwo } type="video/ogg" />Your browser does not support the video tag. I suggest you upgrade your browser.
               </video>



      </div>
    );
  }
}

export default Slider;

Runnerup

This might be helpful. – Brinton

I found out one thing that when i add controls then I'm able to play the video using play sign and in console it sows warning that Invalid DOM property autoplay. Did you mean autoPlay? Can someone help me how to write autoplay ? – Runnerup

Hi @Adarsha Jha, you can use like following <video autoPlay> <source src={url} type="video/mp4" /> <Overlay /> </video> – Clotilde

Answer 1

As noted in the comments by @Pavan kumar Dasireddy, you want to use the autoPlay attribute (notice the capital P).

<video  loop autoPlay>
    <source src= { covervid } type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
    <source src={ covervidtwo } type="video/ogg" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

if you look in your console you will see:

Warning: Invalid DOM property `autoplay`. Did you mean `autoPlay`?

Sepulchre

Answer 2

Just set a name for the autoplay attribute or use autoPlay. In addition, set the muted tag for the video. Chrome for instance block autoplay videos that have sound.

https://www.theverge.com/2018/3/22/17150870/google-chrome-autoplay-videos-sound-mute-update

<video loop autoplay='' muted>
      ...
</video>

Moreover, since the source tags are used by the browser to check compability and display the video properly, you can insert the error sentence "Your browser does not support video..." once after all the source tags. It'll be displayed only if the browser does not support all the source tags.

Anubis

Answer 3

thanks that worked for me!!

this was my code

<video loop autoplay="" muted>
    <source src="./videos/video.mp4" type="video/mp4" />
</video>

Backstitch

Please don't add "thank you" as an answer. Once you have sufficient reputation, you will be able to vote up questions and answers that you found helpful. - From Review – Hashimoto

Answer 4

In my case, Using JSX, I needed to import the video file and then use it in the video tag. Otherwise it wasn't able to find the video:

import tabVideo from '../assets/video/tab-navigation.mp4';

<video width="400" controls autoPlay muted loop>
    <source src={tabVideo} type="video/mp4"/>
    {VIDEO_NO_SUPPORT_STRING}
</video>

Supplicatory