HTML YouTube Видео
Самым простым способом воспроизведения видео в HTML является использование сайта YouTube.
Что такое YouTube и для чего он нужен?
YouTube (от англ. you «ты, вы» + tube «труба» = «телик» жарг. «телевизор») - самый большой и самый популярный мировой видеохостинг, который предоставляет услуги размещения видеоматериалов. Основан 14 февраля 2005 тремя работниками PayPal: Чадом Герли, Стивеном Чени и Джаведом Каримом. Является подразделением компании Google. По состоянию на декабрь 2020 года YouTube является вторым по посещаемости сайтом в Интернете (по данным компании Alexa Internet).
Пользователи могут добавлять, просматривать и комментировать те или иные видеозаписи. Благодаря простоте и удобству использования YouTube стал одним из самых популярных видеохостингов. Служба содержит как профессиональные, так и любительские видеозаписи, включая видеоблоги.
Любой человек может бесплатно зарегистрироваться на сайте Google (создать собственный email), а потом перейти на сайт YouTube и открыть собственный видео-канал. Затем все свои видео с YouTube можно встраивать на любые другие веб-страницы, используя обычный html-код.
Борьба с видеоформатами
Ранее в этом учебном пособии вы видели, что вам придется конвертировать видео в различные форматы, чтобы сделать их воспроизводимым во всех браузерах.
Но конвертирование видеофайлов в различные форматы может быть довольно сложным и занимать много времени.
Более простое решение - это встроить видео с YouTube для воспроизведения на вашей веб-странице.
YouTube видео идентификатор - Id
YouTube будет отображать идентификатор (например, tgbNymZ7vqY) при сохранении (или воспроизведение) видео.
Вы можете использовать этот идентификатор и ссылаться на свое видео в HTML-коде.
Воспроизведение видео с YouTube на HTML-странице
Чтобы воспроизвести видео с YouTube на веб-странице, выполните приведенные ниже действия:
- Загрузите видео на YouTube
- Обратите внимание на идентификатор видео - Id
- Определите элемент
<iframe>
на вашей веб-странице - Атрибут
src
указывает URL-адрес видео - Используйте атрибуты
width
(ширина) иheight
(высота), чтобы определить размеры плеера - Добавьте к URL другие необходимые параметры (см. ниже)
Например - Использование 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 - Повторение
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
Попробуйте сами »
YouTube Controls - панель управления
Значение 0: элементы управления плеера не отображаются.
Значение 1 (по умолчанию): элементы управления плеера отображаются.
YouTube - Панель управления
<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">
Попробуйте сами »
Также вы можете посмотреть, Как сделать адаптивным вставленное видео с YouTube? т.е. меняющимся при изменении размера окна просмотра.