Запуск Youtube или onclick на iframe

Цели

Сегодня встала задача – при начале воспроизведения YouTube-ролика, вставленно через iframe, запустить таймер.

Попытка №1 – videojs

Можно обернуть youtube ролик videojs и используя плагин videojs-youtube (https://github.com/eXon/videojs-youtube) наверное отлавливать событие типа onplay или как оно там называется.

Но мне это показалось геморрно, тем более на страничке с плагином videojs-youtube (по ссылке выше) написано:

Install

You can use bower (bower install videojs-youtube), npm (npm install videojs-youtube) or the source and build it using grunt. Then, the only file you need is dist/vjs.youtube.js.

Интересно, в каком мире живет автор этого плагина? Какого хера, я сижу в Windows 8.1, где мне взять этот гребанный vjs.youtube.js? Я полазил по папкам плагина здесь же, на github’е, но не нашел. Задним умом я понимаю что поиском через минуту он окажется у меня, но злость моя затмила мне разум, и я послал этот плагин далеко.

Итак, videojs при всём уважении к авторам отпадает.

Способ №2 – YouTube Player API Reference for iframe Embeds

У гугловодов есть два вида API посвященный процессингу воспроизведения роликов с Youtube.

Первый – YouTube JavaScript Player API Reference предназаначен для проигрывателей встраиваемых в страницу через object тэг (Flash Player 10.1 или более поздней версии) или через Chromeless Player.

Но этот способ мне не подходжил, так как я имел видео через iframe.

И тут же вижу прекрасную ссылку на YouTube Player API Reference for iframe Embeds и радостно потираю руки – https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Как раз то что мне нужно, вроде бы! Беглый обзор этого API позволил создать тестовый прообраз player’а, через который можно было перехватывать событие onStateChange, чтобы в итоге перехватить событие onplay.

Но ни хера! При производстве ролика с ид M7lc1UVf-VE всё было ОК, все функции API работали как заявлено в руководстве, но стоило мне поменять ид видео на 9kyNeSNO8Ck, как событие onStateChange переставало перехватываться, о чём свидетельствовали вызовы console.log в нужных местах.

Используя Fireox Firebug панель, я увидел такую ошибку:

"NetworkError: 404 Not Found - http://www.youtube.com/get_video?noflv=1&video_id=9kyNeSNO8Ck&cpn=0OwdBht95fxY5Vtu&el=embedded&referrer&eurl=http%3A%2F%2Fgoloslogos.ru%2Fgoloslad.html&fmt=18&ptk=youtube_none"

Во время воспроизводства предыдущего ролика такой ошибки не было. Похоже, дело в ней. Но откуда она берется? Ведь всё, что я сделал, это поменял видео ид для YouTube, больше ничего!

Беглый обзор гуглопоиска показал эту проблему – https://code.google.com/p/gdata-issues/issues/detail?id=6529 – и то что она до сих пор не решена. Похоже корни этой проблемы лежат в настройках автора YouTube видео, то есть является ли он партнёром YouTube ли нет, но дальше копать не было времени и желания, какого хрена я за гугль должен решать их проблему, они мне миллиардов не платят.

Поэтому YouTube Player API – в топку!

Способ №3: iframe.onclick

И тут меня по голове тюкнуло – мне нужно перехватить только запуск видео, который происходит по щелчку в любом месте прогрывателя, спрятанного в iframe. Но проблема в том, что обычный jQuery $(window).click(function(){}) не ловит это событие внутри iframe.

Поиск показал ложное решение этой проблемы:

document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() {
  alert("iframe clicked");
}

Дело в том, что этот в принципе верный способ не работает при кросс-доменных запросах, а youtube.com и даже youtu.be никак не относятся к моему домену.

Ниже я нашел это (вольный перевод с английского):

“Можно использовать решение, основанное на событиях blur и mouseover/mouseout. Плагин господина Vince iframeTracker jQuery plugin разработан как раз для детекта кликов по iframe’ам : https://github.com/finalclap/iframeTracker-jquery”

Итак, плагин iframeTracker-jquery, очень интересно и звучит заманчиво. Я его подключил к нашему проекту, написал такой прмерно код:

jQuery(document).ready(function($){
// id моего iframe с YouTube - player
    $('#player').iframeTracker({
        blurCallback: function(){
        // здесь происходит событие клик на iframe
            startMyTimer();
        }
    });
});

И всё получилось! При клике на ролике YouTube он запускался, и также запускалась наша функция startMyTimer()!

Благодарности

Спасибо автору этого замечательного jQuery плагина, низкий ему поклон за работу.

Моя задача оказалась успешно решенной, я получил свои очередные $1100 (тысячу сто баксов) и пошёл заниматься своими делами, коих у меня невпроворот.

Чего и Вам искренне советую, дорогие друзья!

До встречи на Альбионе.