javascript - 嵌入式 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 文档中所示，因为每个视频 ID 都是从 javscript 数组加载的。

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

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

Answer 1

使用 iframe API 时。您不必让 YT.Player 构造函数生成 API ...如果您将现有 iframe 的 ID 或对现有 DOM 元素的引用作为参数传递(并且在任何情况下都省略 ' videoId' 参数)，然后播放器对象将使用现有的 iframe 进行初始化并设置所有绑定(bind)。所以代替这个:

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