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，因此它可以更好地与ipads和移动设备配合使用。不，我不想从谷歌文档中看到的api本身加载iframe，因为每个视频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
    }
  });
}

嵌入式iframe元素无法使用youtube iframe api

1 个答案: