javascriptreactjshtml5-video

react js html5 video not working

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;
Solution

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