YouTube iFrame API在Firefox中没有触发'onStateChange'事件

Question

YouTube iFrame API在Firefox中没有触发'onStateChange'事件

9

截至今天，在Firefox中，我发现使用YouTube iFrame API的onStateChange无法触发。这似乎是一个新问题-上周完全正常工作的使用相同API和代码的项目现在不能触发其onStateChange事件。这个问题似乎只影响Firefox，Chrome和Internet Explorer可以完全工作。这是一个已知的bug吗？如果是，是否有可用的解决方法？（这里有一个类似的问题here，但它似乎是关于YouTube临时的bug，现在已经被修复了。那里发布的解决方案也似乎无法解决这个问题。）例如，这里有一个使用Google的基本示例的fiddle。播放器应该在六秒后停止，但实际上没有停止：

http://jsfiddle.net/wf4NW/

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

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

  tag.src = "https://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() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

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

  // 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) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

- BiscuitBaker

2

我今天也遇到了同样的问题，在火狐浏览器上状态不再改变。 - Loenix

此问题已在 https://code.google.com/p/gdata-issues/issues/detail?id=6531 上报。开发团队已经确认了这个问题，并且正在快速修复中。 - Ibrahim Ulukaya

gdata问题链接：https://code.google.com/p/gdata-issues/issues/detail?id=6531 - knotito

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Minzner · Accepted Answer

这似乎是与YouTube Flash播放器有关的问题。当使用Flash时（似乎是默认设置），API不起作用。

然而，当请求HTML5模式时，stateChange事件会触发。

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

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

  tag.src = "https://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() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      playerVars: {
        html5: 1
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

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

  // 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) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

这里是原始的jsfiddle，但已修改为使用HTML5播放器。使用HTML5播放器后，视频确实像应该的那样在6秒后暂停。