How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66?
To make the autoplay on html 5 elements work after the chrome 66 update you just need to add the muted property to the video element.
So your current video HTML
<video title="Advertisement" webkit-playsinline="true" playsinline="true" style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" autoplay=""></video>Just needs muted="muted"
<video title="Advertisement" style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" autoplay="true" muted="muted"></video>I believe the chrome 66 update is trying to stop tabs creating random noise on the users tabs. That's why the muted property make the autoplay work again.
For me (in Angular project) this code helped:
In HTML you should add autoplay muted
In JS/TS
playVideo() { const media = this.videoplayer.nativeElement; media.muted = true; // without this line it's not working although I have "muted" in HTML media.play();}
Try to use mousemove event listener
var audio = document.createElement("AUDIO")document.body.appendChild(audio);audio.src = "./audio/rain.m4a"document.body.addEventListener("mousemove", function () { audio.play()})