如何动态更改Youtube播放器的视频ID

Question

我希望使用YT.Player代码以便我可以检测事件。我有一个包含YouTube视频ID的CSV文件和一个将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
      }
   });
}

如果您熟悉此代码，则会发生以下情况：#player DIV 将被一个 IFRAME 替换。我可以使用此函数更改 IFRAME 源：

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

但是这个方法存在很多bug并且不支持跨浏览器。如果我使用标准的IFRAME而不是YT播放器API，一切都能正常工作。但是我想要检测结束，暂停等操作，所以必须使用API。我猜测这是一个状态问题，可能是在创建IFRAME的过程中某个地方出现了数据丢失。

谢谢。

- Serious Starsider

---

你有没有阅读过 Youtube API 的文档？你可以使用在 onYouTubeIframeAPIReady 中获取的 player 变量来进行 API 调用。 - Philipp Gayret

Answer 1

这非常容易通过js api实现。当您想要加载新视频时，只需调用player.loadVideoById(videoId);。详情请参见https://developers.google.com/youtube/iframe_api_reference#loadVideoById。

- Greg Schechter

---

请注意，这是使用 iFrame API 进行的操作，因为“JavaScript API”现已过时。 - sheriffderek

截至2019年1月15日，我可以确认player.loadVideoById(videoId);是有效的。 - Mauricio Arias Olave

Answer 2

如果有人像我一样遇到困难，这可能会有所帮助...

当videoId被硬编码时，player.loadVideoById(videoId)只对我有效，例如player.loadVideoById('sdfexxdfse')

当我尝试直接将该值放入变量中或存储在数组中时，即使它包含相同的信息，它也无法正常工作。

每次视频都出现不正确的参数。

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

var x = new String(variabledatahere)

完成了任务。

- user10211839

---

这很难以置信。 - GirkovArpa