Керуємо Iframe та отримуємо інформацію відео з YouTube

js 2 хвилин 24 секунд 31 груд. 2022
Керуємо Iframe та отримуємо інформацію відео з YouTube

YouTube  дає змогу вставляти відео через Iframe, але іноді потрібно керувати цим відео програмно, а не тицяти по елементах керування.

Можна використати api, але це не наш шлях самурая. Ми будем керувати через postMessage.
Покопавшись по js файлах YouTube я знайшов доволі багато функцій які ми, можете використати.

Спробуймо запустити відео.

Важливо для роботи, потрібно додати до url iframe параметр ?enablejsapi=1

<iframe id='video' width="560" height="315" src="https://www.youtube.com/embed/6B1zEnE3H1A?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Щоб надіслати команду на запуск відео виконаємо команду 

 document.querySelector('#video').contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

Поставити на паузу

 document.querySelector('#video').contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

Зупинити відео

 document.querySelector('#video').contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');

Відімкнути звук

 document.querySelector('#video').contentWindow.postMessage('{"event":"command","func":"mute","args":""}', '*');

Увімкнути звук

 document.querySelector('#video').contentWindow.postMessage('{"event":"command","func":"unMute","args":""}', '*');

Весь список функцій є 👉 тут 

Інформація про відео

Ми можемо не багато дізнатись, але деяка інформація буде корисна:

  • Назва відео
  • Автор
  • Лінк на канал автора
  • Прев'ю відео
  • Html Iframe 

Приклад 

https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=6B1zEnE3H1A&format=json
{
"title": "Оnline chat site in telegram - free chat in site",
"author_name": "Oleksandr",
"author_url": "https://www.youtube.com/@PechenkiUA",
"type": "video",
"height": 113,
"width": 200,
"version": "1.0",
"provider_name": "YouTube",
"provider_url": "https://www.youtube.com/",
"thumbnail_height": 360,
"thumbnail_width": 480,
"thumbnail_url": "https://i.ytimg.com/vi/6B1zEnE3H1A/hqdefault.jpg",
"html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/6B1zEnE3H1A?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen title=\"Оnline chat site in telegram - free chat in site\"></iframe>"
}

 Далі можете уже використовувати цю інформацію на свій розсуд.

 

Telegram чат