web-dev-qa-db-fra.com

La lecture automatique de YouTube ne fonctionne pas

Mon site Web a un lecteur pour plusieurs vidéos. J'ai adapté le code pour utiliser l'API iframe de YouTube en tant que lecteur. Je ne parviens pas à lire les vidéos automatiquement. Voici le code pertinent:

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

Le reste est constitué du script API iframe YouTube standard. Vous pouvez voir que j'ai essayé de définir Autoplay = 1 à la fois comme paramètre iframe et dans le cadre de iframe src. J'ai aussi essayé de l'inclure dans les données du bouton. Aucun de ceux-ci ne semble fonctionner. Les vidéos se chargent lorsque les boutons sont cliqués, mais elles ne s'exécutent pas automatiquement.

iframeyoutube
6
Bewildered

mute=1 ou muted=1 comme suggéré par @Fab fonctionnera. Cependant, si vous souhaitez activer la lecture automatique avec son, vous devez ajouter allow="autoplay" à votre <iframe> intégré.

<iframe type="text/html" src="https://www.youtube.com/embed/-ePDPGXkvlw?autoplay=1" frameborder="0" allow="autoplay"></iframe>

Ceci est officiellement pris en charge et documenté dans La publication 2017 de Google sur les modifications de la stratégie de lecture automatique

Délégation Iframe Une politique de fonctionnalités permet aux développeurs de sélectionner activer et désactiver l'utilisation de diverses fonctionnalités du navigateur et des API. Une fois Origin a reçu la permission de lecture automatique, il peut déléguer cela autorisation de cross-Origin iframes avec une nouvelle stratégie de fonctionnalité pour lecture automatique. Notez que l'exécution automatique est autorisée par défaut sur same-Origin 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">

Lorsque la stratégie de fonctionnalité pour l'exécution automatique est désactivée, appelle play () sans un geste de l'utilisateur rejettera la promesse avec un NotAllowedError DOMException. Et l'attribut autoplay sera également ignoré.

21
Dzejms

Ce code vous permet de lire automatiquement la vidéo iframe

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

Voici le violon en marche

3
YoJey Thilipan

Supprimer les espaces avant la lecture automatique = 1: Src = "https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&;enablejsapi=1"

1
user2693928

Vous pouvez utiliser le lecteur intégré avec opacité sur une photo de couverture avec une icône de lecture positionnée à droite. Après cela, vous pouvez vérifier l’élément actif de votre document. 

Bien sûr, je sais que ce n'est pas une solution optimale, mais fonctionne également sur les appareils mobiles.

<div style="position: relative;">
   <img src="http://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>

Essayez-le sur codepen: https://codepen.io/sarkiroka/pen/OryxGP

0
sarkiroka