Срок работы пробной версии продукта истек. Через две недели этот сайт полностью прекратит свою работу. Вы можете купить полнофункциональную версию продукта на сайте www.1c-bitrix.ru. IFrame API Youtube своя кнопка запуска плеера
Есть ответы на вопросы сертификации? Хочешь поделиться новостью о своем проекте? Тогда пиши нам!

IFrame API Youtube своя кнопка запуска плеера

IFrame API Youtube своя кнопка запуска плеера

Довольно распространенная задача на landing page - стилизовать Youtube проигрыватель, например, вывести свою большую кнопку или, например, при паузе видео снова показать кнопку проигрывания. В любом случае не зависимо от задачи, в первую очередь стоит обратить внимание на iframe API Youtube.

Сразу рассмотрим пример кода:

function onYouTubeIframeAPIReady() {
    var iStatus;

    oPlayer = new YT.Player('videoPlayer', {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });

    var $playButton = $('#videoPlayBtn');
    $playButton.on("click", function() {
        if (iStatus == YT.PlayerState.PLAYING) {
            $playButton.show();
            oPlayer.pauseVideo();
            iStatus = YT.PlayerState.PAUSED;
        } else {
            oPlayer.playVideo();
            iStatus = YT.PlayerState.PLAYING;
            $playButton.hide();
        }
    });

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PAUSED) {
            $playButton.show();
            iStatus = YT.PlayerState.PAUSED;
        } else if (event.data == YT.PlayerState.PLAYING) {
            iStatus = YT.PlayerState.PLAYING;
            $playButton.hide();
        }
    }
}

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

При подключении iframe API сразу же вызывается метод onYouTubeIframeAPIReady() в котором мы инициализируем объект плеера и прописываем обработчик события. Также мы добавляем обработчик события нажатия нашей кнопки, которая должна при успехе запустить видео и скрыться. Для отслеживания последнего статуса вводим переменную iStatus. В iframe API Youtube есть несколько статусов:

if (event.data === YT.PlayerState.PLAYING) { /* Видео проигрывается */ }
if (event.data === YT.PlayerState.ENDED) { /* Видео закончилось */ }
if (event.data === YT.PlayerState.PAUSED) { /* Видео на паузе */ }
if (event.data === YT.PlayerState.BUFFERING) { /* Буферизация */ }
if (event.data === YT.PlayerState.CUED) { /* В очереди */ }

В нашем примере мы отлавливаем только два состояния: проигрывание и пауза. К основным методам API мы бы отнесли:

oPlayer.playVideo(); // Проиграть текущее видео
oPlayer.pauseVideo(); // Пауза
oPlayer.stopVideo(); // Остановить видео

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

Вывод большой кнопки Play при помощи iframe API

Тут мы поверх iframe разместили собственный div элемент с кнопкой клики по которой мы и отлавливаем.

Скачать пример работы с iframe API Youtube

Данный пример явно есть куда улучшать и оптимизировать, например, делать не полное перекрытие iframe видео, а выводить по центру только div с кнопкой заданного размера, так же можно оптимизировать и сам код для работы с API Youtube, тут нет совершенства, но наш пример просто наглядно демонстрирует как можно быстро решить задачу.

 1787 API, api, YouTube, JS, javascript, iframe API Youtube, Сниппет, Код
7 июня 2017
Команда BXCert

Наша команда разрабатывает портал BXCert, а также занимается разработкой сайтов на CMS 1С-Битрикс. Все участники являются сертифицированными специалистами Bitrix.

Возможно Вам будет интересно

Комментарии