YouTube API-iframe onStateChange события

Я использую iframe YouTube API, и я хочу отслеживать события, например, отправку данных в google analytics, когда пользователь запускает и останавливает видео.

<iframe src="https://www.youtube.com/embed/DjB1OvEYMhY"></iframe>

Я посмотрел https://developers.google.com/youtube/iframe_api_reference?csw=1 и не нашел примера как это сделать. В примере создается iframe и также определяются onReady и onStateChange. Как я могу сделать то же самое, когда у меня есть только iframe на странице?

9
javascript youtube youtube-api

1 ответов

этот пример прослушивает каждое действие воспроизведения / паузы, которое пользователь делает, используя onPlayerStateChange С государства, и печатает (записи) них.

однако вам нужно создать свой собственный record функция, чтобы сделать все, что вы хотите с этими данными.

вам также нужен идентификатор на вашем iframe (#плеер в этом случае) и добавить ?enablejsapi=1 в конце его URL. И конечно, убедитесь, что включите окне iframe с YouTube API-интерфейс.

Примечание

важно объявить API после вашего кода, потому что он называет onYouTubeIframeAPIReady когда он будет готов.

<!DOCTYPE html>
<html>
<body>
    <iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe>
    <h5>Record of user actions:</h5>
    <script>
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player( 'player', {
          events: { 'onStateChange': onPlayerStateChange }
        });
      }
      function onPlayerStateChange(event) {
        switch(event.data) {
          case 0:
            record('video ended');
            break;
          case 1:
            record('video playing from '+player.getCurrentTime());
            break;
          case 2:
            record('video paused at '+player.getCurrentTime());
        }
      }
      function record(str){
        var p = document.createElement("p");
        p.appendChild(document.createTextNode(str));
        document.body.appendChild(p);
      }
    </script>
    <script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>

JS Fiddle Demo

12