Question

我有两个彩盒弹出框，每个弹出框都显示一个youtube视频。当他们完成播放时，我试图让它们自动关闭彩盒窗口。下面的代码在firefox中运行完美，但在IE中我无法使用addEventListener。我试过attachEvent没有成功。任何人都可以提出如何解决这个问题的建议吗？看起来很简单，但我已经筋疲力尽，试图找到解决方案。顺便说一句，这是我第一次访问stackoverflow，这非常令人印象深刻。

更新1：

嗯，这是我目前的代码。它在FF中运行完美，但IE只能输出良好。 IE8调试器也不报告任何错误...

function onYouTubePlayerReady(playerId) {
  if (playerId && playerId != 'undefined') {
    if(playerId && playerId == 'ytvideo1'){
      var ytswf = document.getElementById('ytplayer1');
      alert('good');
    } else if(playerId && playerId == 'ytvideo2'){
      var ytswf = document.getElementById('ytplayer2');
    } else {
    }

    setInterval('', 1000);
    ytswf.addEventListener('onStateChange', 'onytplayerStateChange');
    alert('great');
  }
}


function onytplayerStateChange(newState) {
  alert('amazing');
  if(newState == 0){
    $.fn.colorbox.close();
    alert('perfect');
  }
}

更新3：解决方案

只需在我的颜色框中放入完整版并将swfobject放入其中，它在IE中完美运行。

Answer 1

IE不支持addEventListener吗？你需要attachEvent吗？

if (el.addEventListener){   
    el.addEventListener('click', modifyText, false);    
else if (el.attachEvent){   
    el.attachEvent('onclick', modifyText);   
}

Answer 2

在IE中测试它看起来像你正在使用的参考

ytswf = document.getElementById('ytplayer1');

在加载实际的swf对象之前分配

，因此IE认为你指的是一个简单的div元素

您需要运行此代码

function onYouTubePlayerReady(playerId) {
  ytswf = document.getElementById("ytplayer1");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

在你打电话后

swfobject.embedSWF("http://www.youtube.com/v/SPWU-EiulRY?
hl=en_US&hd=0&rel=0&fs=1&autoplay=1&enablejsapi=1&playerapiid=ytvideo1",
"popupVideoContainer1", "853", "505", "8", null, null, params, atts);

关闭$(function()

之前

并放置var ytswf; 在<script>之后而不是进一步下降

Answer 3

新答案

YouTube播放器对象实现了自己的addEventListener方法，这更像是AS3的语法。根据列出的信息here：

player.addEventListener（事件：字符串; 听者：字符串）：无效

YouTube在我链接的页面上提供了一个示例，我将在此处提供：

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   alert("Player's new state: " + newState);
}

YouTube还提供了一个示例页面，似乎可以证明他们的示例代码在IE中有效。我将链接该示例页面here。

现在，根据Google / YouTube提供的示例，尝试重新编写代码的相关部分：

function onYouTubePlayerReady(playerId) {
  if(playerId && playerId == 'ytvideo1'){
    var ytplayer = document.getElementById('ytplayer1');
  } else if(playerId && playerId == 'ytvideo2'){
    var ytplayer = document.getElementById("ytplayer2");
  } else {
    return;
  }

  ytplayer.addEventListener('onStateChange', 'onytplayerStateChange');
}

因此，事实证明，此处所犯的错误源于使用方法名称“addEventListener”所造成的混淆。在W3C JavaScript实现中，第二个参数是一个函数，而在YouTube实现中，第二个参数是一个字符串。给这个镜头=）。

javascript addEventListener onStateChange在IE中不起作用

3 个答案: