web-dev-qa-db-fra.com

Comment changer dynamiquement le videoID du lecteur Youtube

Je souhaite utiliser le code YT.Player pour pouvoir détecter des événements. J'ai un fichier CSV avec des ID vidéo Youtube et une fonction qui place les ID dans un tableau et je veux pouvoir changer dynamiquement l'ID lorsqu'un utilisateur clique sur une image. Essentiellement comme ceci:

html

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

javascript

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_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.
// NOTE: videoId is taken out and instead is placed as the generated IFRAME src from the postSelection function

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      height: '100%',
      width: '100%',
      videoId: '<<CALL TO FUNCTION OR VARIABLE HERE>>',
      events: {
         //'onReady': onPlayerReady,
         'onStateChange': onPlayerStateChange
      }
   });
}

Si vous connaissez ce code, ce qui se passe est le #player DIV est remplacé par un IFRAME. Je peux changer la source IFRAME avec cette fonction:

function postSelection() {
    $("#player").attr("src", _selected.attributes.url); //_selected.attributes.url comes from the CVS file
}

Mais c'est très bogué et non compatible avec tous les navigateurs. Si j'utilise un IFRAME standard et non l'API du lecteur YT alors tout fonctionne très bien. Mais je veux détecter la fin, et faire une pause et ainsi de suite donc je dois utiliser l'API. Ma conjecture c'est qu'il s'agit d'un problème d'état et que la persistance se perd quelque part dans la création de l'IFRAME.

Cordialement.

javascriptjqueryiframeyoutube-api
26
Serious Starsider

C'est très simple à faire avec l'api js. Lorsque vous souhaitez charger une nouvelle vidéo, appelez simplement player.loadVideoById(videoId); Détails sur https://developers.google.com/youtube/iframe_api_reference#loadVideoById

52
Greg Schechter