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
}

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

问候。

Answer 1

使用js api非常简单。如果您想加载新视频，请拨打https://developers.google.com/youtube/iframe_api_reference#loadVideoById

上的player.loadVideoById(videoId);详细信息

Answer 2

万一这对像我一样挣扎的人有所帮助...

仅当videoId被硬编码（例如， player.loadVideoById(videoId)

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

每次视频的参数设置都不正确。

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

player.loadVideoById('sdfexxdfse')

工作完成了。

如何动态更改Youtube Player videoID

2 个答案: