Я использую гибкие поля ACF и добавил поле для ссылки на Youtube в каждом блоке. Когда я прокручиваю каждый блок, я бы хотел, чтобы iframe Youtube начинал воспроизводиться автоматически (поэтому, когда он достиг области просмотра). Когда я прокручиваю этот блок, я бы хотел, чтобы он приостановился, и когда он достигнет следующего блока, он воспроизведет это и т. Д. Пожалуйста, может кто-нибудь помочь?
Brad 23 Фев 2022 в 20:45
1 ответ
Основная проблема заключается в том, что YouTube не позволяет автоматически воспроизводить видео без взаимодействия с пользователем. вы можете прочитать ссылка на iframe API
Я пробовал с помощью этой функции JavaScript:
function isInViewport(element) < const rect = element.getBoundingClientRect(); return ( rect.top >= 0 rect.left >= 0 rect.bottom
Эта функция возвращает true, если переданный элемент находится в области просмотра, и false, если нет.
Затем я использую другую функцию, вызываемую в каждом addEventListener для событий «прокрутки» и «изменения размера»:
Почему Не Показывает Эпизоды или Главы на Ваших Видео в Ютубе
function checkScroll() < // Get the video element var video = document.getElementById(‘player’); if (isInViewport(video) == true) < playVideo(); >else < pauseVideo(); >>;
Но, как я сказал в начале, это работает только в том случае, если пользователь инициирует игрока взаимодействием.
Надеюсь, это поможет.
Jesús Noè Nogueiras 24 Фев 2022 в 13:08
Спасибо, однако извините, что я пытаюсь применить это конкретно к iframes Youtube (используя API YouTube), а не к видео HTML5, но, похоже, я не могу заставить его работать. Я добавляю window.addEventListener() в onPlayerReady(), однако он не работает. Например, я использую это как ссылку: codepen.io/discreteprojects/pen/xbORdg , однако я не могу заставить его работать с несколькими видео на странице.
23 Фев 2022 в 21:49
Спасибо Иисус. Я думаю, что API YouTube об отключении автоматического воспроизведения относится только к мобильным устройствам. Я думаю, что понимаю ваш код выше, спасибо, но я изо всех сил пытаюсь заставить этот код работать с несколькими видео на YouTube. Вот мой Codepen, если вы хотите попробовать это со своей стороны: codepen.io/ECUSER/pen/YzEjVWq . Я предполагаю, что это как-то связано с дублированными идентификаторами? Благодарю вас!
Источник: question-it.com