HTML5. YouTube відео

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Найпростішим способом відтворення відео в HTML є використання сайту YouTube.


Що таке YouTube і для чого він потрібен?

YouTube logo

YouTube (від англ. you «ти, ви» + tube «труба» = «телик» жарг. «телевізор») - найбільший і найпопулярніший світовий відеохостинг, що надає послуги розміщення відеоматеріалів. Заснований 14 лютого 2005 року трьома працівниками PayPal: Чадом Герлі, Стівеном Чені та Джаведом Карімом. Є підрозділом компанії Google. Станом на серпень 2017 року YouTube є другим за відвідуваністю сайтом в Інтернеті (за даними компанії Alexa Internet).

Користувачі можуть додавати, продивлятись і коментувати ті чи інші відеозаписи. Завдяки простоті та зручності використання YouTube став одним із найпопулярніших місць для розміщення відеофайлів. Служба містить як професійні, так і аматорські відеозаписи, включаючи відеоблоги.

Будь-хто може зареєструватись на сайті Google (створити власний email), а потім перейти на сайт YouTube та відкрити власний відео-канал. Потім всі відео із YouTube можна вбудовувати на будь-які інші веб-сторінки, використовуючи звичайний html-код.


Боротьба з відеоформатами?

Раніше в цьому навчальному посібнику ви бачили, що вам доведеться конвертувати відео в різні формати, щоб зробити їх відтворюванними в усіх браузерах.

Конвертування відеофайлів у різні формати може бути складним та тривалим.

Більш просте рішення - дозволити YouTube відтворювати відео на вашій веб-сторінці.


YouTube відео ідентифікатор - Id

YouTube відображатиме ідентифікатор (наприклад, tgbNymZ7vqY) під час збереження (або відтворення) відео.

Ви можете використовувати цей ідентифікатор і посилатися на своє відео в HTML-коді.


Відтворення відео YouTube в HTML

Щоб відтворити відео на веб-сторінці, виконайте наведені нижче дії:

Приклад - використання iFrame (рекомендується)

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY"
>

</iframe>
Спробуйте самі »

YouTube Autoplay - автоматичне відтворення

Ви можете зробити автоматичне відтворення відео, коли користувач відвідує сторінку, додавши простий параметр до URL-адреси YouTube.

Примітка: Будьте уважні при прийнятті рішеня про автоматичне відтворення відео. Автоматичний запуск відео може дратувати вашого відвідувача і в кінцевому підсумку заподіяти більше шкоди, ніж користі, бо користувачі можуть відразу зилишати сайт.

Значення 0 (за замовчуванням): відео не відтворюватиметься автоматично під час завантаження плеєра.

Значення 1: відео буде відтворюватися автоматично під час завантаження плеєра.

YouTube - Autoplay

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1"
>

</iframe>
Спробуйте самі »

YouTube Playlist - плейлист

Розділений комами список відео для відтворення (крім вихідної URL-адреси).


YouTube Loop - повторення відтворення відео

Значення 0 (за замовчуванням): відео буде відтворюватися лише один раз.

Значення 1: відтворення відео буде припинено.

YouTube - Loop

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1"
>

</iframe>
Спробуйте самі »

YouTube Controls - панель управління

Значення 0: елементи керування плеєра не відображаються.

Значення 1 (за замовчуванням): елементи керування плеєра відображаються.

YouTube - Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"
>

</iframe>
Спробуйте самі »

YouTube - використання <object> або <embed>

Примітка: YouTube <object> та <embed> вважаються застарілими із січня 2015 року. Ви маєте змінити додавання вашого відео, використовуючи <iframe> замість цього.

Приклад - використання <object> (застаріле)

<object width="420" height="315"
data="https://www.youtube.com/embed/tgbNymZ7vqY"
>

</object>
Спробуйте самі »

Приклад - використання <embed> (застаріле)

<embed width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY"
>

Спробуйте самі »


warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.