如何动态更改Youtube Player videoID

I want to use the YT.Player code so that I can detect events. I have a CSV file with Youtube video ID's and a function that puts the ID's in an array and want to be able to dynamically change the ID when a user click an image. Essentially like this:

我想使用YT.Player代码，以便我可以检测事件。我有一个带有Youtube视频ID的CSV文件和一个将ID放在一个数组中并希望能够在用户点击图像时动态更改ID的功能。基本上是这样的：

html

HTML

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

javascript

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

If you are familiar with this code then what happens is the #player DIV is replaced by an IFRAME. I can change the IFRAME source with this function:

如果您熟悉此代码，那么#player DIV将由IFRAME替换。我可以使用此功能更改IFRAME源：

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

But this is very buggy and not cross browser friendly. If I use a standard IFRAME and not the YT Player API then everything works just fine. But I want to detect the end, and pause and so on so I have to use the API. My guess is that it is an issue with state and that persistence is lost some where in the creation of the IFRAME.

但这是非常错误的，并不是跨浏览器友好。如果我使用标准IFRAME而不是YT Player API，那么一切正常。但我想检测结束，暂停等等所以我必须使用API。我的猜测是，这是一个状态问题，并且在创建IFRAME的某些地方会失去持久性。

Regards.

问候。

1 个解决方案

#1

This is very simple to do with the js api. When you want to load a new video just call player.loadVideoById(videoId); Details at https://developers.google.com/youtube/iframe_api_reference#loadVideoById

这与js api非常简单。当你想加载一个新视频时，只需调用player.loadVideoById（videoId）;有关详细信息，请访问https://developers.google.com/youtube/iframe_api_reference#loadVideoById

秒客网

如何动态更改Youtube Player videoID

1 个解决方案

#1

#1

相关文章