web-dev-qa-db-fra.com

Mise en lecture et en boucle d'une vidéo YouTube intégrée

J'essaie d'obtenir une vidéo Youtube de base pour une lecture automatique et une boucle automatique intégrée à une page, mais je n'ai pas de chance.

<div style="text-align: center; margin: auto"><object type="application/x-shockwave-flash" style="width:1120px; height:630px;" data="http://www.youtube.com/v/GRonxog5mbw?rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;version=3&amp;showinfo=0&amp;modestbranding=1&amp;fs=1">
<param name="movie" value="http://www.youtube.com/v/GRonxog5mbw?rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;version=3&amp;showinfo=0&amp;modestbranding=1&amp;fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object></div>
htmlcssyoutubeyoutube-api
51
Justin Newbury

YouTubes HTML5 code intégré:

<iframe width="560" height="315" src="http://www.youtube.com/embed/GRonxog5mbw?autoplay=1&loop=1&playlist=GRonxog5mbw" frameborder="0" allowfullscreen></iframe>​

Vous pouvez lire à ce sujet ici: ... (EDIT Le lien est mort.) ... Voir le contenu original sur le projet Internet Archive.

http://web.archive.org/web/20121016180134/http://brianwong.com/blog/2012-youtube-embed-code-autoplay-on-and-all-other-parameters/ =

70
Jamie Hayman

Voici la liste complète des paramètres du lecteur intégré YouTube .

Informations pertinentes:

autoplay (lecteurs pris en charge: AS3, AS2, HTML5) Valeurs: 0 ou 1. La valeur par défaut est 0. Définit si la vidéo initiale sera lue automatiquement ou non. le joueur charge.

loop (lecteurs pris en charge: AS3, HTML5) Valeurs: 0 ou 1. La valeur par défaut est 0. Dans le cas d'un lecteur vidéo unique, le paramètre 1 obligera le lecteur à lire la vidéo initiale encore et encore. Dans le cas d'un lecteur de liste de lecture (ou d'un lecteur personnalisé), le lecteur lira l'intégralité de la liste de lecture, puis recommencera à la première vidéo.

Remarque: Ce paramètre a une prise en charge limitée dans le lecteur AS3 et dans les intégrations IFrame, ce qui pourrait charger le lecteur AS3 ou HTML5. Actuellement, le paramètre de boucle ne fonctionne que dans le lecteur AS3 lorsqu'il est utilisé conjointement avec le paramètre de liste de lecture. Pour boucler une seule vidéo, définissez la valeur du paramètre loop sur 1 et définissez la valeur du paramètre playlist sur le même ID vidéo que celui spécifié dans l'URL de l'API du lecteur:

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

Utilisez l'URL ci-dessus dans votre code d'intégration (ajoutez également d'autres paramètres).

39
Salman A

Toutes les réponses n'ont pas fonctionné pour moi, j'ai vérifié l'URL de la playlist et j'ai vu cette playlist paramètre changé en liste! Il devrait donc être:

& loop = 1 & list = PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs

Voici donc le code complet que j'utilise pour créer une vidéo en boucle propre et en lecture automatique:

<iframe width="100%" height="425" src="https://www.youtube.com/embed/MavEpJETfgI?autoplay=1&showinfo=0&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs&rel=0" frameborder="0" allowfullscreen></iframe>
4
Tarik

Même expérience, mais ce qui a fait la magie pour moi est de ne pas changer d'ancrage en v.

Donc, le code va ressembler à ça ...

<iframe width="560" height="315" src="https://www.youtube.com/embed/cTYuscQu-Og?Version=3&loop=1&playlist=cTYuscQu-Og" frameborder="0" allowfullscreen></iframe>

J'espère que ça aide...

1
pst tomowo

Le hack de la playlist n'a pas fonctionné pour moi non plus. Solution de contournement pour septembre 2018 (bonus: définir la largeur et la hauteur par CSS pour #yt-wrap au lieu de le coder en dur dans JS):

<div id="yt-wrap">
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="ytplayer"></div>
</div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      width: '100%',
      height: '100%',
      videoId: 'VIDEO_ID',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
    player.mute(); // comment out if you don't want the auto played video muted
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.seekTo(0);
      player.playVideo();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>
1
LuH