The autoplay background hero on my website recently stopped working due to Chrome's new autoplay blocker. There is no audio so I'm confused as to why...please assist.
www.homecareassistancemontreal.ca
Asked
Active
Viewed 324 times
-1
-
I see you have incorporated @Andrzej's solution on your website; it would have been proper to acknowledge that over here. – Mr Lister Jul 06 '18 at 13:29
-
My apologies. Thank you for your assistance – Tim Thomas Jul 07 '18 at 16:06
3 Answers
2
It stopped, because Chrome doesn't want any sound-generating videos to start without user's direct agreement (e.g. starting it). If you want video to autoplay you must ensure it is muted.
To do so you must add muted attribute to your <video>.
<video muted>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Andrzej Ziółek
- 2,241
- 1
- 13
- 21
0
Videos must be muted.
<video muted>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
One issue I recently come across with Chrome was that if you're adding Video elements via JavaScript and you're setting your muted attribute to true. Google will block playback if you're using .setAttribute. Use dot notation instead.
Bad
VideoElement.setAttribute('muted', true);
Good
VideoElement.muted = true;
justuff
- 228
- 3
- 10
0
There is a smart hack that will autoplay video with sound without any problem:
navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
video.play(); // play your media here
// stop microphone stream acquired by getUserMedia
stream.getTracks().forEach(function (track) { track.stop(); });
});
It will ask users for their Microphone permission (only first time in chrome) and they have to click Allow then you are permitted to play anything with sound. It works because as long as you are capturing anything then you are allowed to play everything and then stop the microphone stream when your media starts playing.
MD. MAHFUZ HOSSAIN
- 51
- 8