2013-03-05 68 views
3

我一直在进行故障诊断并搜索了几个小时的答案,但无济于事。 API文档中的代码示例正在逐字使用。其他人发布和说在IE9上工作的示例代码不适合我。我已经确认了doctype在html中正确设置,我没有在CSS中使用display = none隐藏iframe,浏览器模式是IE9,文档模式是IE9标准。我的安全设置配置为中等偏高。即使在我的IE9浏览器中,谷歌的示例页面也不适用于我。YouTube iframe API - onReady和onStateChanged事件在IE9中未触发

https://developers.google.com/youtube/youtube_player_demo

当我点击“播放”,力图使影片播放(在上面的链接),我得到的各种错误的脚本调试IE控制台。第一个错误是这样的:

SCRIPT5009: '视频' 是不确定的

请帮帮忙!我的示例代码如下。电影加载后,我看到“API已准备就绪”警报,但其他事件都不会在IE9中触发。我只是不知道我错过了什么!如果我不能很快了解这一点,我将不得不放弃在我的项目中使用YouTube进行html5视频播放。

<!DOCTYPE html> 
<html> 
    <head><title></title></head> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 

    <script type="text/javascript"> 
     // 2. This code loads the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 

     // This is a protocol-relative URL as described here: 
     //  http://paulirish.com/2010/the-protocol-relative-url/ 
     // If you're testing a local page accessed via a file:/// URL, please set tag.src to 
     //  "https://www.youtube.com/iframe_api" instead. 
     //tag.src = "//www.youtube.com/iframe_api"; 
     tag.src = "https://www.youtube.com/iframe_api"; 
     //tag.src = "http://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. 
     var player; 
     function onYouTubeIframeAPIReady() { 
      alert("API is ready!"); 
      player = new YT.Player('player', { 
       height: '450', 
       width: '800', 
       videoId: 'mU7aJgvh9K8', 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
      event.target.playVideo(); 
      alert("Player is ready!"); 
     } 

     // 5. The API calls this function when the player's state changes. 
     // The function indicates that when playing a video (state=1), 
     // the player should play for six seconds and then stop. 
     var done = false; 
     function onPlayerStateChange(event) { 
      alert("State changed!"); 
      if (event.data == YT.PlayerState.PLAYING && !done) { 
       setTimeout(stopVideo, 6000); 
       done = true; 
      } 
     } 
     function stopVideo() { 
      player.stopVideo(); 
     } 
    </script> 
    </body> 
</html> 

回答

8

那么,在一个同事的机器上测试并发现问题是特定于我的系统上的IE浏览器后,我开始再次查看浏览器设置。一时兴起,我禁用了我的Flash播放器(在Internet选项,程序,管理附加组件)和中提琴上,视频代码像魅力一样工作。我还注意到我的Flash播放器已经过时(9.0.45.0),并且在安装最新版本的播放器之后它仍然工作。

不知道为什么旧的Flash播放器干扰YouTube API和事件 - 但显然这是罪魁祸首。

+2

我没有足够的声望投票或评论,但我想说谢谢,因为这解决了我一整天的头痛!如果我找到让他们一起工作的方法,我会回复。编辑:如果它帮助别人;我们通过使用定位来显示和隐藏YouTube容器而不是使用“display:none”或“visibility:hidden”来解决此问题。 – Wayferer 2013-04-10 00:03:46

+0

关于甚至不使用'visibility:hidden'来代替'display:none'的部分是我的优点。谢谢。 – 2014-03-05 14:39:24