Mijn website heeft een speler voor meerdere video’s. Ik heb de code aangepast om de iframe-API van YouTube als speler te gebruiken. Ik krijg de video’s niet automatisch afgespeeld. Hier is de relevante code:
<body>
<iframe id="existing-iframe-example"
width="640" height="360"
src="https://www.youtube.com/embed/-SFcIUEvNOQ? autoplay=1&;enablejsapi=1"
frameborder="0"
autoplay="1"
style="border: solid 4px #37474F"
></iframe>
<div id="player"></div>
<div id="movieButtons" class="movieButtons">
<button class="movieButton" data-movieAdr="1-VjtC939_Q">Memorial Slide Show</button>
De rest is een standaard YouTube iframe API-script. Je kunt zien dat ik heb geprobeerd om Autoplay=1 in te stellen als zowel een iframe-parameter als als onderdeel van de iframe src. Ik heb ook geprobeerd het in de gegevens in de knop op te nemen. Geen van deze lijkt te werken. De video’s worden geladen wanneer er op de knoppen wordt geklikt, maar ze worden niet automatisch afgespeeld.
Antwoord 1, autoriteit 100%
Het werkt niet meer sinds april 2018 omdat Google heeft besloten gebruikers meer controle over het afspelen te geven. Je hoeft alleen maar &mute=1 toe te voegen aan je URL.
Beleidswijzigingen voor automatisch afspelen
<iframe id="existing-iframe-example"
width="640" height="360"
src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&mute=1&enablejsapi=1"
frameborder="0"
style="border: solid 4px #37474F"
></iframe>
Bijwerken:
Audio-/video-updates in Chrome 73
Google zei:
Nu Progressive Web Apps (PWA’s) beschikbaar zijn op alle desktopplatforms, breiden we de regel die we hadden op mobiel uit naar desktop: autoplay met geluid is nu toegestaan voor geïnstalleerde PWA’s. Houd er rekening mee dat dit alleen van toepassing is op pagina’s in het bereik van het web-app-manifest.
https://developers.google.com /web/updates/2019/02/chrome-73-media-updates#autoplay-pwa
Antwoord 2, autoriteit 64%
mute=1of muted=1zoals voorgesteld door @Fabzal werken. Echter, als je autoplay met geluid wilt inschakelen, moet je allow="autoplay"toevoegen aan je ingesloten <iframe>.
<iframe type="text/html" src="https://www.youtube.com/embed/-ePDPGXkvlw?autoplay=1" frameborder="0" allow="autoplay"></iframe>
Dit wordt officieel ondersteund en gedocumenteerd in Autoplay-beleidswijzigingen van 2017 van Google plaatsen
Iframe-delegatie Een functiebeleid stelt ontwikkelaars in staat om selectief
het gebruik van verschillende browserfuncties en API’s in- en uitschakelen. eens een
origin autoplay-toestemming heeft gekregen, kan het dat delegeren
toestemming voor cross-origin iframes met een nieuw functiebeleid voor
automatisch afspelen. Merk op dat automatisch afspelen standaard is toegestaan op dezelfde oorsprong
iframes.<!-- Autoplay is allowed. --> <iframe src="https://cross-origin.com/myvideo.html" allow="autoplay"> <!-- Autoplay and Fullscreen are allowed. --> <iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">Als het functiebeleid voor automatisch afspelen is uitgeschakeld, worden aanroepen om te spelen()
zonder een gebruikersgebaar zal de belofte afwijzen met een NotAllowedError
DOMuitzondering. En het autoplay-kenmerk wordt ook genegeerd.
Antwoord 3, autoriteit 5%
Met deze code kun je iframe-video automatisch afspelen
<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
Antwoord 4, autoriteit 2%
Je kunt de speler insluiten met dekking op een omslagfoto met een rechts geplaatst afspeelpictogram. Hierna kunt u het activeElement van uw document controleren.
Natuurlijk weet ik dat dit geen optimale oplossing is, maar werkt ook op mobiele apparaten.
<div style="position: relative;">
<img src="https://s3.amazonaws.com/content.newsok.com/newsok/images/mobile/play_button.png" style="position:absolute;top:0;left:0;opacity:1;" id="cover">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2qhCjgMKoN4?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture" allowfullscreen style="position: absolute;top:0;left:0;opacity:0;" id="player"></iframe>
</div>
<script>
setInterval(function(){
if(document.activeElement instanceof HTMLIFrameElement){
document.getElementById('cover').style.opacity=0;
document.getElementById('player').style.opacity=1;
}
} , 50);
</script>
Probeer het op CODESEPEN: https://codepen.io/sarkiroka/pen/oryxgp
Antwoord 5
Verwijder de ruimtes vóór de autoplay = 1:
src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&;enablejsapi=1"