So ändern Sie die Video-ID des Youtube-Players dynamisch

Ich möchte den YT.Player-Code verwenden, damit ich Ereignisse erkennen kann. Ich habe eine CSV-Datei mit Youtube-Video-IDs und einer Funktion, die die IDs in ein Array einfügt und möchte die ID dynamisch ändern können, wenn ein Benutzer auf ein Bild klickt. Im Wesentlichen so:

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
      }
   });
}

Wenn Sie mit diesem Code vertraut sind, passiert Folgendes: #player DIV wird durch ein IFRAME ersetzt. Ich kann die IFRAME-Quelle mit dieser Funktion ändern:

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

Aber das ist sehr fehlerhaft und nicht Cross-Browser-freundlich. Wenn ich ein Standard-IFRAME und nicht die YT Player-API verwende, funktioniert alles einwandfrei. Aber ich möchte das Ende erkennen und pausieren und so weiter, also muss ich die API verwenden. Ich vermute, dass es sich um ein Problem mit dem Status handelt und dass die Persistenz irgendwo bei der Erstellung des IFRAME verloren geht.

Grüße.

Dies ist sehr einfach mit der js-API zu tun. Wenn Sie ein neues Video laden möchten, rufen Sie einfach an player.loadVideoById(videoId); Einzelheiten unter https://developers.google.com/youtube/iframe_api_reference#loadVideoById

Falls dies jemandem hilft, der so kämpft wie ich …

Dies player.loadVideoById(videoId) funktionierte nur für mich, wenn videoId z. B. fest codiert war
player.loadVideoById('sdfexxdfse')

Als ich versuchte, diesen Wert direkt in eine Variable einzufügen oder in einem Array zu speichern, funktionierte es nicht, obwohl es die gleichen Informationen enthielt.

Das Video kam jedes Mal mit falschen Parametern.

Hinzufügen zu einer Variablen auf diese Weise

var x = new String(variabledatahere)

hat die Arbeit gemacht.