Jak dynamicznie zmieniać wideo wideo YouTubeID

Question

Chcę używać kodu YT.Player, aby móc wykrywać zdarzenia. Mam plik CSV z identyfikatorami wideo Youtube i funkcją, która umieszcza identyfikatory w tablicy i chce mieć możliwość dynamicznej zmiany identyfikatora, gdy użytkownik kliknie obraz. Zasadniczo tak:

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

Jeśli jesteś obeznany z tym kodem, to co się dzieje, jest #player DIV jest zastąpiony przez IFRAME. Mogę zmienić źródło IFRAME za pomocą tej funkcji:

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

Jest to jednak bardzo błędne i nie jest przyjazne dla przeglądarki. Jeśli używam standardowego IFRAME, a nie YT Player API, wszystko działa dobrze. Ale chcę wykryć koniec i wstrzymać itd., Więc muszę użyć interfejsu API. Domyślam się, że jest to problem ze stanem i że utrata pewności jest tracona gdzieś w tworzeniu IFRAME.

Pozdrawiam.

Answer 1

Jest to bardzo proste do zrobienia z js api. Gdy chcesz, aby załadować nowy film wystarczy zadzwonić player.loadVideoById(videoId); Szczegóły na https://developers.google.com/youtube/iframe_api_reference#loadVideoById