Video not playing upon first load or after refreshing

Question

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!

Does this answer your question? [Video auto play is not working in Safari and Chrome desktop browser](https://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser) — Józef Podlecki, Jun 11 '20 at 16:25
[Also good lecture](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes) — Józef Podlecki, Jun 11 '20 at 16:27
No because the I don't want the video to be muted, and the answers in the post suggested adding the muted attribute — Xi Liu, Jun 11 '20 at 16:32
Are you aware that this is browser thing and you cant get around it? The least you can do is wait till user starts clicking on the page so then you can start movie — Józef Podlecki, Jun 11 '20 at 16:35
yeah I just wanted to put this question up to check whether there is really no way around it — Xi Liu, Jun 11 '20 at 16:39
Regarding the link you just posted, under the "Best practices for web developers section," do you know what would the code be like to start autoplay if the promise returned by play() is not undefined? — Xi Liu, Jun 11 '20 at 16:44
If the promise is not undefined then it plays already. If its undefined well you have a lot of options from showing some text, popup, any interaction to encourage user to click somewhere on the page and in the handler you try to play video programmatically again — Józef Podlecki, Jun 11 '20 at 16:49

score 1 · Answer 1 · answered Sep 10 '20 at 06:23

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"
    />

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

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.

Video not playing upon first load or after refreshing

2 Answers2