Использование API-интерфейса Youtube Player внутри формы Mechanical Turk не запускает OnStateChange - PullRequest
Новая
       135

Использование API-интерфейса Youtube Player внутри формы Mechanical Turk не запускает OnStateChange

2 голосов
/ 29 мая 2020

Я пытаюсь вставить iframe youtube внутри, чтобы поставить на amazon Mechanical Turk.

Однако, если проигрыватель youtube <div> находится внутри, он не запускает событие «onStateChange».

Вот минимальный код для воспроизведения. В этом случае OnStateChange не срабатывает, когда видео приостановлено: 

<!DOCTYPE html>
<html>
  <body>
  <script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
    <crowd-form>
    <div id="player"></div>  <!-- This doesn't print YOLO on StateChange-->
    </crowd-form>

    <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: {
        'onStateChange': onPlayerStateChange
      }
    });
      }

      // 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) {
    console.log('Yolo')
      }

    </script>
  </body>
</html>

В этом случае OnStateChange срабатывает, когда видео приостановлено, но мне нужно внутри, чтобы включить механический турок. 

<!DOCTYPE html>
<html>
  <body>
  <script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
    <div id="player"></div> <!-- This does print YOLO on StateChange-->
    <crowd-form>
    </crowd-form>

    <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: {
        'onStateChange': onPlayerStateChange
      }
    });
      }

      // 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) {
    console.log('Yolo')
      }

    </script>
  </body>
</html>

Мне было интересно, почему это происходит и как это можно решить.

Спасибо.

...