Всем привет! У меня есть слайдер на странице. Каждый слайд - это довольно большой кусок текста, вставленные с помощью iframe видео с YT, аудио, фотографии. Задача: при переходе к другому слайду останавливать воспроизведение тех видео, которые были запущены.
Решение: 1. Самое простое, что мне удалось найти, - это переприсвоить iframe.src ссылку. Работает, при этом видео при возвращении к нему начнёт проигрываться с начала. 2. Хороший способ, который бы меня устроил, - это iframe.contentWindow.postMessage(options). Но сколько “не танцую с бубном”, не работает - видео не становится на паузу.
Проблемы: для первого решения - как получить только те видео, которые в процессе проигрывания? В слайдере 10 слайдов, всего видео может быть около 50 или больше в сумме. Все примеры со статусом видео только в случае вставки видео при помощи new Player - мне не подходит этот вариант. Может, кто-то сталкивался?
Тебе нужно посмотреть на апи для ифрейма ютюбного проигрователя. Возможно для этого нужно будет подключать какой-нить js и уже через него создавать проигрыватели в ифреймах.
Точка входа в это апи - функция onYouTubeIframeAPIReady которую выполнит js код отвечающий за встраивание плеера.
По ссылке что я кинул есть пример как раз остановки играющего видео.
Пишу очень крупными мазками.
Задача будет сводиться к тому чтобы слушать события и держать локальное состояние соответствующее состоянию плееров. На каждую готовность плеера создавать запись, навешивать обработчики, на каждый старт-стоп - обновлять состояние этой записи. Для каждой записи держать инстанс плеера с помощью которого сможешь слать сигналы для стоп-старт.
UPD я ответил без учета того что тебе не подходит создание плеера через new. Но скорее всего иного пути просто нет. Я в свое время когда решал подобную задачу тоже пришел к работе через js а не разметку ифрейма.
Дело в том, что эти видео вставляются через админку в Wordpress (( Это как-то “сопрягаемо” - вставка видео через Wordpress и создание плееров на странице с JS?
Ты имеешь в виду, вставить видео в Wordpress (это будет всё равно через iframe), а когда страница загрузится, вытащить из него id и уже инициализировать через JS? Идея отличная, но в совокупности на странице будет около 50 видео или даже больше. Не скажется ли это на производительности?
Ты имеешь в виду, вставить видео в Wordpress (это будет всё равно через iframe), а когда страница загрузится, вытащить из него id и уже инициализировать через JS?
Да. Думаю будет достаточно даже не загрузки страницы а загрузки DOM-а.
на странице будет около 50 видео или даже больше. Не скажется ли это на производительности?
Теоретически проблемы возможны. Но есть хороший шанс, если свести работу с DOM-ом не дожидаясь загрузки самих ифреймов, то работа js сведется к подмене 50 дом узлов на другие. Это не проблема даже для мобильных браузеров.
Если померяешь и будут проблемы, тогда нужно будет смотреть на истинную причину задержки (например параллельные запросы к ютюбу или дороговизна обработки ДОМ-а).
Но так как альтернатив особо-то и не просматривается, этот вариант стоит пробовать.