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;

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

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.