March 20

HTML-видео на YouTube

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


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

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

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


Идентификатор видео На YouTube

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

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


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

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

  • Загрузите видео на YouTube
  • Запишите идентификатор видео
  • Определите элемент <iframe> на вашей веб-странице
  • Пусть атрибут src указывает на URL-адрес видео
  • Используйте атрибуты width и height, чтобы указать размер игрока
  • Добавьте любые другие параметры к URL-адресу (см. ниже)

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

Автовоспроизведение YouTube + Отключение звука

Вы можете разрешить автоматическое воспроизведение вашего видео при посещении страницы пользователем, добавив значение autoplay=1 к URL-адресу YouTube. Однако автоматический запуск видео раздражает ваших посетителей!

Примечание: Браузеры Chrom в большинстве случаев не разрешают автовоспроизведение. Тем не менее, приглушенный автовоспроизведение всегда разрешено.

Добавьте mute=1 после autoplay=1, чтобы ваше видео начало воспроизводиться автоматически (но без звука).

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

Плейлист YouTube

Разделенный запятыми список видео для воспроизведения (в дополнение к оригинальному URL-адресу).

Цикл YouTube

Добавьте loop=1, чтобы ваше видео зацикливался навсегда.

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

Значение 1: Видео будет зацикливаться (навсегда).

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

Элементы Управления YouTube

Добавьте controls=0, чтобы не отображать элементы управления в видеоплеере.

Значение 0: Элементы управления игроком не отображаются.

Значение 1 (по умолчанию): Дисплей управления игроком.

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