HTML5 YouTube видео

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих



Самым простым способом воспроизведения видео в HTML является использование сайта YouTube.


Что такое YouTube и для чего он нужен?

YouTube logo

YouTube (от англ. you «ты, вы» + tube «труба» = «телик» жарг. «телевизор») - самый большой и самый популярный мировой видеохостинг, который предоставляет услуги размещения видеоматериалов. Основан 14 февраля 2005 тремя работниками PayPal: Чадом Герли, Стивеном Чени и Джаведом Каримом. Является подразделением компании Google. По состоянию на август 2019 года YouTube является вторым по посещаемости сайтом в Интернете (по данным компании Alexa Internet).

Пользователи могут добавлять, просматривать и комментировать те или иные видеозаписи. Благодаря простоте и удобству использования YouTube стал одним из самых популярных видеохостингов. Служба содержит как профессиональные, так и любительские видеозаписи, включая видеоблоги.

Любой человек может бесплатно зарегистрироваться на сайте Google (создать собственный email), а потом перейти на сайт YouTube и открыть собственный видео-канал. Затем все видео с YouTube можно встраивать на любые другие веб-страницы, используя обычный html-код.


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

Ранее в этом учебном пособии вы видели, что вам придется конвертировать видео в различные форматы, чтобы сделать их воспроизводимым во всех браузерах.

Но конвертирование видеофайлов в различные форматы может быть довольно сложным и занимать много времени.

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


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

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

Вы можете использовать этот идентификатор и ссылаться на свое видео в HTML-коде.


Воспроизведение видео с YouTube на HTML-странице

Чтобы воспроизвести видео с YouTube на веб-странице, выполните приведенные ниже действия:

Пример - использование 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"
>

Попробуйте сами »