YouTube iframe API "onStateChange" не работает в Firefox

на сегодняшний день у меня возникли некоторые трудности с получением API iframe YouTube onStateChange для запуска в Firefox.

Это, похоже, новая проблема-проекты, использующие тот же код с тем же API, которые работали полностью на прошлой неделе, теперь не запускают их onStateChange событий. Эта проблема, похоже, влияет только на Firefox-Chrome и Internet Explorer работают полностью.

Это известная ошибка, и есть ли обходной путь, если это так?

(есть похожие вопрос здесь, но, похоже, это временная ошибка на стороне YouTube, которая теперь исправлена. Решение, опубликованное там, также, похоже, не устраняет эту проблему.)

в качестве примера, вот скрипка, использующая основной пример из Google. Игрок должен остановиться через шесть секунд, но не делает:

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>
9
firefox youtube youtube-api

1 ответов

похоже, это проблема с проигрывателем YouTube flash player. Когда используется 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 OP, но изменен для использования проигрывателя HTML5. С HTML5-плеер, видео тут пауза через 6 секунд, как и должно быть.

8