Учебник по HTML

HTML ГЛАВНАЯ Введение в HTML HTML-редакторы Базовый HTML HTML-элементы HTML-атрибуты HTML-заголовки HTML-абзацы HTML-стили HTML-форматирование HTML-цитаты HTML-комментарии Цвета HTML HTML CSS HTML-ссылки HTML-изображения HTML Фавикон HTML-таблицы HTML-списки Блок HTML и встроенный HTML-классы HTML-идентификатор HTML-фреймы HTML JavaScript Пути HTML-файлов HTML-голова HTML-макет HTML Отзывчивый HTML компьютерный код HTML-семантика Руководство по стилю HTML HTML-сущности HTML-символы HTML-смайлики HTML-кодировка HTML-кодирование URL-адреса HTML против XHTML

HTML -формы

HTML-формы Атрибуты HTML-формы HTML-элементы формы Типы ввода HTML Атрибуты ввода HTML Атрибуты формы ввода HTML

HTML- графика

HTML-холст HTML SVG

HTML- медиа

HTML-медиа HTML-видео HTML-аудио HTML-плагины HTML YouTube

HTML -API

HTML-геолокация Перетаскивание HTML Веб-хранилище HTML Веб-воркеры HTML HTML SSE

HTML- примеры

HTML-примеры HTML-викторина HTML-упражнения HTML-сертификат Резюме HTML Доступность HTML

HTML -ссылки

Список тегов HTML HTML-атрибуты Глобальные атрибуты HTML Поддержка HTML-браузера HTML-события Цвета HTML HTML-холст HTML-аудио/видео Типы документов HTML Наборы символов HTML HTML-кодирование URL-адреса Языковые HTML-коды HTTP-сообщения HTTP-методы Конвертер PX в EM Горячие клавиши

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. Однако автоматический запуск видео раздражает ваших посетителей!

Примечание. Браузеры Chromium в большинстве случаев не поддерживают автозапуск. Однако приглушенный автозапуск всегда разрешен.

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

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

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


Плейлист YouTube

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


Цикл YouTube

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

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

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

YouTube — Цикл

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

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

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

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

Значение 1 (по умолчанию): Плеер управляет отображением.

YouTube – элементы управления

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