Video autoplay doesn't work without hard refresh - html

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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().

Answer 5

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'