Youtube 视频事件没有触发 [在本地或其他地方进行测试时]？答案

【问题标题】：Youtube video events not firing [when testing locally or otherwise]?Youtube 视频事件没有触发 [在本地或其他地方进行测试时]？
【发布时间】：2012-03-23 21:58:51
【问题描述】：

我有以下代码，几乎直接取自 API，但事件没有触发。有任何想法吗？谢谢。

var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '250',
      width: '300',
      videoId: 'u1zgFlCw8Aw',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    alert("Ready");
    event.target.playVideo();
  }

  function onPlayerStateChange(event) {

      alert("State Changed");

  }

回答：原来是因为我在本地进行测试，doh！但请参阅下文了解其他可能的原因。

【问题讨论】：

我也在本地开发.... facepalm
可能的原因：1.在某些浏览器中，由于安全限制的副作用，在“本地”测试（加载文件而不经过localhost）将不起作用 2.混合嵌入API（使用 iframe API 声明 iframe（在其中声明 DIV 并加载一些 JS）。这些事件似乎只适用于后者。 3. DIV 上的 ID 与 new YT.Player(...) 调用上的 ID 不匹配 4. 未能在全球范围内定义 onYouTubePlayerAPIReady 我很高兴 OP 只有问题 #1。我必须通过所有四个才能使其发挥作用。

标签： javascript youtube

【解决方案1】：

尝试使用下面的代码，非常适合我

<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'JW5meKfy3fY',
      playerVars:{'autoplay':1, 'rel':0, 'showinfo':0, 'egm':0, 'showsearch':0,},
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(event) {
    event.target.playVideo();
}
function onPlayerStateChange(event,element) {
    //When the video has ended
    if (event.data == YT.PlayerState.ENDED) {
        //Get rid of the player
        element.style.display = "none";
    }
}

【讨论】：