Ik krijg de foutmelding...
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
..wanneer ik probeer video af te spelen op desktop met Chrome versie 66.
Ik heb echter een advertentie gevonden die automatisch begon af te spelen op een website met de volgende HTML:
<video
title="Advertisement"
webkit-playsinline="true"
playsinline="true"
style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
autoplay=""></video>
Dus is het omzeilen van Chrome v66's autoplay blocker echt zo eenvoudig als het toevoegen van de webkit-playsinline="true"
, playsinline="true"
, en autoplay=""
attributen aan het <video>
element? Zijn hier negatieve consequenties aan verbonden?
Om de vraag te beantwoorden...
Nee, het is niet genoeg om deze attributen te hebben, om een media met audio automatisch te kunnen afspelen moet je een gebruikers-gesture geregistreerd hebben op je document.
Maar, deze beperking is erg zwak: als je dit user-gesture op het bovenliggende document had ontvangen, en je video werd geladen vanuit een iframe, dan zou je het kunnen afspelen...
Dus neem bijvoorbeeld [deze fiddle](
), die is alleen<video src="myvidwithsound.webm" autoplay=""></video>
Bij de eerste keer laden, en als je'nergens klikt, zal het niet lopen, omdat we'nog geen event geregistreerd hebben.
Maar als je eenmaal op de "Run" knop klikt, dan heeft het bovenliggende document (jsfiddle.net) wel een user-gesture ontvangen, en nu speelt de video af, ook al is hij technisch gezien in een ander document geladen.
Maar het volgende knipsel, omdat het vereist dat u daadwerkelijk klikt op de Run code snippet knop, zal automatisch afspelen.
<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>
Dit betekent dat uw advertentie waarschijnlijk kon worden afgespeeld omdat u een gebruikers-gesture naar de hoofdpagina hebt gegeven.
Nu, merk op dat Safari en Mobile Chrome strengere regels hebben dan dat, en zullen vereisen dat je tenminste een keer de play()
methode programmatisch activeert op het <video>
of <audio>
element van de user-event handler zelf.
btn.onclick = e => {
// mark our MediaElement as user-approved
vid.play().then(()=>vid.pause());
// now we can do whatever we want at any time with this MediaElement
setTimeout(()=> vid.play(), 3000);
};
<button id="btn">play in 3s</button>
<video
src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" id="vid"></video>
En als u de audio niet'nodig hebt, voeg het dan gewoon niet toe aan uw media, een video met alleen een videotrack is ook toegestaan om automatisch af te spelen, en zal het bandbreedtegebruik van uw gebruiker'verminderen.
Type Chrome://flags in de adresbalk
Zoeken: Autoplay
Autoplay Beleid
Beleid dat wordt gebruikt om te bepalen of audio of video is toegestaan om automatisch af te spelen.
- Mac, Windows, Linux, Chrome OS, Android
Stel dit in op "Geen gebruikersgebaren vereist"
Start Chrome opnieuw en u hoeft geen code te veranderen