События iframe на YouTube

Question

Я пытаюсь отловить события iframe на YouTube: http://lab.joergpfeiffer.de/videofull/youtube.php

Итак, я называю сначала API

<script type='text/javascript' src='http://www.youtube.com/player_api'></script>

Я установил iframe

<iframe id="ytfullplayer" type="text/html" width="640" height="390" src="http://www.youtube.com/p/B93C3D017CB2D65A?enablejsapi=1&origin=lab.domain.de" frameborder="0" ></iframe>

и попробуйте установить события позже в

var ytfullplayer;
    function onYouTubePlayerAPIReady() {
        console.log('onYouTubePlayerAPIReady');
        ytfullplayer = new YT.Player('ytfullplayer', {
            events: {
              'onReady': testfunc,
              'onPlaybackQualityChange': testfunc,
              'onStateChange': testfunc,
              'onError': testfunc
            }
        });

    }
    function testfunc(){ alert('hello'); }

Что бы я ни делал, никаких событий не происходит. И я читаю API iframe 10 раз. это должно работать на самом деле.

Есть идеи?

Answer 1

Выполните эти подпрограммы перед включением YouTubePlayerAPIReady ()

// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

если все еще есть путаница, тогда посетите http://code.google.com/apis/youtube/iframe_api_reference.html

Answer 2

Я сделал следующее.

Начал с примера кода, найденного на https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Затем я заменил:

<div id="player"></div>

на

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0">
</iframe>

(разметка iframe найдена по тому же URL-адресу)

Затем я избавился от параметра origin в приведенном выше примере, который, казалось, заставлял все работать.Кстати, я обнаружил, что шаг 2 можно заменить на разметку:

<script src="https://www.youtube.com/iframe_api"></script>

Answer 3

У меня такая же проблема. Кажется, это связано с ручным вводом iframe вместо использования подстановки тега div. Если я использую метод div, он работает нормально, ручной iframe, нет.

Асинхронная загрузка скрипта API или включение его в заголовок вручную не имеет значения.

Я только что перешел на замену div и перестал с ней бороться.

Answer 4

Ответ Адиля должен решить вашу проблему.

Google рекомендует загружать скрипт API проигрывателя асинхронно, то есть, позволяя загружать остальную часть вашей страницы, пока скрипт загружается одновременно.

Поскольку вы размещаете тег script в своей разметке на ранней стадии, остальная часть страницы не будет выполнена, пока этот скрипт не будет загружен.Поэтому, когда выполняется вызов onYouTubePlayerAPIReady (), ваша функция еще не определена.