嵌入式 iframe 元素不适用于 youtube iframe api

Question

这是这个项目的 jsfiddle：http://jsfiddle.net/frankzfaz/bweH4/13/

按下按钮时，我想使用的 iframe 元素通过 javascript 加载到 html 中：

document.getElementById('iframeload').innerHTML = '<iframe id="ytplayer" type="text/html" width="300" height="300" src="https://www.youtube.com/embed/' + metalMusicVid[indexVid].youTubeId + '?enablejsapi=1&modestbranding=1&rel=0&iv_load_policy=3&showinfo=0&controls=0&autoplay=1" frameborder="0" allowfullscreen></iframe>';

如您所见，“metalMusicVid[indexVid].youTubeId”从 js 数组中提取 youtube 视频 ID。这就是我希望它工作的方式。

我希望它与 youtube api 事件侦听器一起工作。如此处所示：

      var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // youtube player api stuff
    function onYouTubePlayerReady(playerId) {
    var player = document.getElementById("ytplayer");
    player.addEventListener("onStateChange", "onytplayerStateChange");
    player.addEventListener("onError", "onPlayerError");

                    // get current time and display it.
                      setInterval(function(){document.getElementById('vidTime').innerHTML = "Current: " + pad(Math.floor(player.getCurrentTime() / 60)) + ":" + pad(Math.floor(player.getCurrentTime() % 60))}, 1000);
                      // pads number with extra zeros, looking more like a real digital clock
                          function pad(val) {
                              var valString = val + "";
                              if (valString.length < 2) {
                                  return "0" + valString;
                              } else {
                                  return valString;
                              }
                          }
  }


function onytplayerStateChange(newState) {
    //console.log("New state " + newState); 
if(newState === 0){alert('the youtube api is working')}
if(newState === -1){alert('the youtube api is working')}
}

function onPlayerError(errorCode) {
  console.log("New ERROR " + errorCode);
}

这适用于对象嵌入，但我想使用 iframe，因此它更适用于 ipad 和移动设备。不，我不想从 api 本身加载 iframe，如 google 文档中所示，因为每个 video-id 都是从 javscript 数组加载的。

我所需要的只是让这些事件侦听器从它的元素 ID 中获取新的 iframe。

网址：http://jsfiddle.net/frankzfaz/bweH4/13/

Answer 1

使用 iframe API 时。您不必让 YT.Player 构造函数生成 API ...如果您将现有 iframe 的 ID 或对现有 DOM 元素的引用作为参数传递（并且在任何一种情况下都省略 ' videoId' 参数）然后播放器对象将使用您现有的 iframe 初始化并设置您的所有绑定。所以不要这样：

function onYouTubePlayerReady(playerId) {
   var player = document.getElementById("ytplayer");
   player.addEventListener("onStateChange", "onytplayerStateChange");
   player.addEventListener("onError", "onPlayerError");
   // ... etc etc etc

你会想要这样的：

function onYouTubeIframeAPIReady() { // called automatically when the iframe API loads.
  var player = new YT.Player(playerId, { // passing the reference to the DOM element of your existing iframe
    events: {
      'onStateChange': onPlayerStateChange,
      'onError': onPlayerError
    }
  });
}