CODEWITHSUNDEEP
htmlhtml5-video
J Seabolt
J Seabolt

Reputation: 2978

Video autoplay doesn't work without hard refresh

I have a video background. It uses autoplay. Here it is: 

<video muted loop autoPlay >
    <source src="assets/videos/background.mp4" type="video/mp4">
</video>

This works ONLY if the page is: 1. Hard refreshed (normal load does not work) 2. Navigated to (If I am on another page and then navigate to the home page)

If you simply navigate to the link, it doesn't work. Link: https://jackseabolt.github.io/trasher/ (please don't mess with the site)

Any thoughts about what's going on here?

Upvotes: 13

Views: 13070

Answers (5)

Niveed Prakashan
Niveed Prakashan

Reputation: 11

In my case same issue happened your solution worked for me but with slight change instead of muted being in the [] replaced it to:

<video muted="true" autoplay playsinline loop>
    <source src="your_video" type="video/mp4">
</video>

And then it worked for me using it in an angular webpage.

Upvotes: 1

verfault
verfault

Reputation: 325

You didn't say that using an Angular in your project. That's simple now:

<video [muted]="true" autoplay playsinline loop>
    <source src="your_video" type="video/mp4">
</video>

Just change muted attribute to [muted]="true".

Upvotes: 22

Hyungju Moon
Hyungju Moon

Reputation: 141

I got the exact same problem.

video.play() returns promise.

This code might help you. 

document.addEventListener('DOMContentLoaded', function (e) {

  var promise = document.querySelector('video').play();

  if (promise !== undefined) {
      promise.catch(error => {
          console.log ("Auto-play failed")
          // Auto-play was failed
      }).then(() => {
          console.log ("Auto-play started")
          // Auto-play started
      });
  }
});

or CoffeeScript

document.addEventListener 'DOMContentLoaded', (e) ->
  promise = document.querySelector('video').play()
  if promise != undefined
    promise.catch((error) ->
      console.log 'Auto-play failed'
    ).then ->
      console.log 'Auto-play started'

Upvotes: 0

Joshua Tuscan
Joshua Tuscan

Reputation: 373

Adding the muted attribute to the video works. This is a browser feature to make sure noisy videos don't autoplay.

Upvotes: 6

Erik Rybalkin
Erik Rybalkin

Reputation: 1251

Google prevents force manipulations in Chrome to start a video on a refresh or by typing direct URL.
NONE of these methods worked:

setTimeout(this.videoStarts,300); // works only time to time, so isn't reliable

Not with jQuery, nor with React refs:

this.video.current.play();
$('.video').get(0).play(); // simply won't work

To solve it you can add interactions:
1. Create a modal window which will ask a user to agree on playing a content.
OR
2. Add an onclick event on a needed tag which will fire play().

Upvotes: 0

Related Questions