YouTube iFrame API“onStateChange"未在 Firefox 中触发 [英] YouTube iFrame API 'onStateChange' not firing in Firefox

问题描述

截至今天，我在让 YouTube iFrame API onStateChange 在 Firefox 中触发时遇到了一些困难.

As of today, I'm having some difficulty getting the YouTube iFrame API onStateChange to fire in Firefox.

这似乎是一个新问题 - 使用相同代码和相同 API 的项目在上周完全正常工作，现在没有触发它们的 onStateChange 事件.此问题似乎只影响 Firefox - Chrome 和 Internet Explorer 可以正常工作.

This appears to be a new problem - projects using the same code with the same API that were working fully last week are now not firing their onStateChange events. This issue only seems to affect Firefox - Chrome and Internet Explorer are working fully.

这是一个已知的错误，如果是，是否有可用的解决方法?

Is this a known bug, and is there a workaround available if it is?

(这里有一个类似的问题，但它似乎是因为 YouTube 方面的一个临时错误现已修复.发布在那里的解决方案似乎也没有解决这个问题.)

(There's a similar question here, but it appears to be for a temporary bug on YouTube's side that has now been fixed. The solution posted there also doesn't seem to fix this issue.)

例如，这是一个使用 来自 Google 的基本示例的小提琴.玩家应该在 6 秒后停止，但不会:

As an example, here's a fiddle using the basic example from Google. The player should stop after six seconds, but doesn't:

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>

推荐答案

这似乎是 YouTube Flash 播放器的问题.使用闪存时(这似乎是默认设置)API 不起作用.

This appears to be an issue with the YouTube flash player. When flash is used (which seems to be the default) the API does not work.

但是，当请求 HTML5 模式时，stateChange 事件会触发.

However, when HTML5 mode is requested, the stateChange event does fire.

<!-- 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>

这是 OP 的 jsfiddle，但已修改为使用 HTML5 播放器.使用 HTML5 播放器，视频确实会在 6 秒后像它应该的那样暂停.

Here is the OP's jsfiddle, but modified to use the HTML5 player. With the HTML5 player, the video does pause after 6 seconds like it should.

这篇关于YouTube iFrame API“onStateChange"未在 Firefox 中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！