7

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;
Adarsha Jha
  • 1,782
  • 2
  • 15
  • 37
  • 1
    [This might be helpful.](https://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser) – Derek 朕會功夫 Oct 20 '17 at 08:38
  • 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 ? – Adarsha Jha Oct 20 '17 at 08:45
  • Hi @Adarsha Jha, you can use like following – Pavan kumar Dasireddy May 09 '18 at 04:09

3 Answers3

17

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`?
nbwoodward
  • 2,816
  • 1
  • 16
  • 24
6

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.

Wender Xavier
  • 61
  • 1
  • 3
0

thanks that worked for me!!

this was my code

<video loop autoplay="" muted>
    <source src="./videos/video.mp4" type="video/mp4" />
</video>
LEARN CHEMAPHY
  • 1
  • 1
  • Please don't add "thank you" as an answer. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation), you will be able to [vote up questions and answers](https://stackoverflow.com/help/privileges/vote-up) that you found helpful. - [From Review](/review/late-answers/32248616) – Lajos Arpad Jul 19 '22 at 12:04