CODEWITHSUNDEEP
htmlreactjshtml5-video
Xi Liu
Xi Liu

Reputation: 629

Video not playing upon first load or after refreshing

The video I posted on the home page of my website did not play on the first load or after refreshing, while it was played after I went from other pages to the home page. The problem could be solved if I added the muted attribute to the video element, but I do want the background music to play. Below is my code:

  componentDidMount() {
    document.getElementById("opening").play();
  }

  ......

  <video autoPlay id="opening">
    <source src={opening} type="video/mp4"></source>
  </video>

Thanks!

Upvotes: 2

Views: 2588

Answers (2)

manzim
manzim

Reputation: 29

I faced the similar problem. then I did this. Though it's not user friendly but after this it worked

   <video 
        src={require('../../resources/sampleVid.mp4')} 
        autoPlay = {false}
        controls = {true}
        loop = {true}
        muted = {false}
        className="flex justify-center mw7-ns"
    />

Upvotes: 1

Piyush
Piyush

Reputation: 3285

I am afraid, but there is no way to play audio in the HTML 5 video automatically.

It is clarly mentioned here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Last modified: May 16, 2020, by MDN contributors

Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.

In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no muted attribute is present.

Upvotes: 0

Related Questions