如何动态更改Youtube Player视频ID

Question

我想使用YT.Player代码，这样我就可以检测事件。我有一个CSV文件，里面有Youtube视频ID和一个将ID放入数组的函数，希望能够在用户单击图像时动态更改ID。本质上是这样的：

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

如果您熟悉此代码，那么会发生#playerDIV被IFRAME替换的情况。我可以使用以下功能更改IFRAME源：

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

但这是非常有缺陷的，不适合跨浏览器。如果我使用标准的IFRAME而不是YT播放器API，那么一切都很好。但我想检测结束，暂停等等，所以我必须使用API。我的猜测是，这是一个状态问题，在创建IFRAME的过程中，持久性在某些地方丢失了。

谨致问候。

Answer 1

使用js-api非常简单。当您想加载新视频时，只需致电player.loadVideoById(videoId);Detailshttps://developers.google.com/youtube/iframe_api_reference#loadVideoById

Answer 2

如果这对像我一样挣扎的人有帮助。。。

这个player.loadVideoById(videoId)只在videoId被硬编码时对我有效。player.loadVideoById('sdfexxdfse')

当我试图将该值直接放入变量中时，或者当存储在数组中时，即使它包含相同的信息，它也不起作用。

视频每次都会出现错误的参数。

以这种方式将其添加到变量

var x = new String(variabledatahere)

完成了任务。