javascript YoutubePlayer OnStateChange没有触发

时间:2014-06-19 05:58:40

标签: javascript youtube-api youtube-javascript-api

我遇到了youtube播放器OnStateChange未触发的问题。我查看了其他帖子并且它们不太适合我的情况,因为我可能使用了不同的(无格式javascript)版本。

HTML:

<div id="ytapiplayer">
 You need Flash player 8+ and JavaScript enabled to view this video.
</div>

使用Javascript:

var params = { allowScriptAccess: "always", wmode: "Opaque" };
var atts = { id: "player" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3",
                   "ytapiplayer", "100%", "100%", "8", null, null, params, atts);

function onYouTubePlayerReady(playerId){
  player = document.getElementById("player");
}

我基本上复制了文档中的示例。然后我就做了

var player = document.getElementById('player');

我可以让它工作得很好。但唯一的问题是,当它改变状态时,OnStateChange事件不会触发。代码是这样的。

document.getElementById('player').addEventListener('OnStateChange', 
  function(new_state){
     console.log(new_state);
  }
)

新州永远不会被打印出来。我做错了吗? http://jsfiddle.net/8QtrC/1/

1 个答案:

答案 0 :(得分:1)

此示例适用于我。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<body>

  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

<script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/Bl4Qne-RpcM?enablejsapi=1&playerapiid=myytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

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

function onytplayerStateChange(newState) {
   alert("Player's new state: " + newState);
}
  </script>
</body>