Запуск видео в iframe

490
05 марта 2017, 08:09

На сайте есть слайдер, который отображает видео, приходящее из сторонник сервисов (YouTube, vimeo), загружаемое в iframe. Мне нужно прокрутить слайдер на мобильном устройстве при помощи touch. Событие при прокрутке по области iframe, естественно, не возникает. Вопрос: если перекрыть iframe прозрачным блоком, который будет реагировать на touch, можно ли как-то передать событие клика внутрь iframe, чтобы запустить и остановить видео. Или это нереально и придется реализовывать стрелки на слайдере для прокрутки?

Answer 1

Допустим, блок, перекрывающий видео, имеет класс .curtain, а само видео размещено в блоке с id=video.

Тогда вот этот код отправит команду на запуск видео.

$('.curtain').click(
    function() {
        var iframe = $('#video iframe');
        $(iframe)[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
    }
);

Надо только иметь ввиду, что для того, чтобы YouTube API работало, ссылка на видео в iframe должна иметь такой вид:

https://www.youtube.com/embed/код-вашего-видео?enablejsapi=1&wmode=transparent

Подробнее о старте/паузе видео можно почитать в этом ответе.

READ ALSO
Нужна помощь с ES6 модулями

Нужна помощь с ES6 модулями

Написал небольшую библиотеку и теперь пытаюсь перевести её на ES6 но и сделать версию для обычного использования, чтобы просто подключить...

272
Проблемы с элементом <track>

Проблемы с элементом <track>

Всем привет! Вообщем не могу понять как сделать так чтобы когда наводишь мышку на субтитры в видео, то они передаются в переменнуюИспользую...

263
Вывести клиенту правильное время

Вывести клиенту правильное время

В БД заношу время в формате time(), те

244
Ошибка при выводе значения из MySQL

Ошибка при выводе значения из MySQL

alert выводит только значения, состоящие из цифрЕсли "подмешиваю" буквы - появляется ошибка Uncaught ReferenceError: yyyyyyyy is not defined

253