Мастер HTML5 Разметка видео

Мастер HTML5 Разметка видео - макеты

Проще говоря, имеется два основных элемента мультимедиа для HTML5, оба из которых абсурдно просты в использовании. Элемент видео назван, и звуковой элемент назван.

В отличие от звука, на который фактически не требуется много (или любое) пространство на экране, для видео требуется экранный кадр, а также более сложные и более многочисленные элементы управления. Вот почему, хотя два элемента разметки похожи, видео поставляется со значительно большим количеством багажа, хотя основная структура элемента остается неизменной:

Список атрибутов управления для видео значительно длиннее и немного сложнее:

автовоспроизведение. Сообщает обозревателю начать воспроизведение видео сразу после загрузки объектного файла. Примеры: автовоспроизведение или автовоспроизведение = «автовоспроизведение».

  • : указывает браузеру отображать экранный виджет для управления воспроизведением видео (обычно с кнопками паузы / воспроизведения, индикатором выполнения и регуляторами громкости). Примеры: элементы управления или элементы управления = «элементы управления».
  • height: устанавливает высоту в пикселях окна, внутри которого будет отображаться видео. Пример: height = "480".

  • loop: указывает браузеру вернуться к началу и продолжать играть, когда он доходит до конца объектного файла. Примеры: loop или loop = "loop".

  • < ! - 3 ->

    mediagroup: используется для синхронизации воспроизведения нескольких видео или мультимедийных элементов (таких как дорожка жестового языка или дорожка SAP). Принимает строковое значение, где обрабатываются все элементы с одинаковым значением медиагруппы в качестве членов этой группы Пример: mediagroup = "movie".
  • muted: устанавливает состояние вывода звука для воспроизведения, если присутствует, звук отключается при начале воспроизведения. Используйте это, когда громкий или потрясающий звук может в противном случае беспокоить посетителей страницы что они могут выбрать для включения звука, если хотите. Примеры: приглушенный или приглушенный = «приглушенный».

  • poster: Указывает изображение для отображения, пока видеофайл недоступен (еще не загружен). = "Poster. Jpg".

  • preload: указывает браузеру, должен ли он предварительно загружать объектный файл, и если да, то как он должен быть предварительно загружен. значения включают:

  • none: Не загружает часть видеофайла при загрузке страницы.

    • метаданные: загружает только метаданные видео при загрузке страницы. Он также настраивает воспроизведение, но пока не загружает данные.

    • auto: загружает весь видеофайл при загрузке страницы.

    • Атрибут предварительной загрузки игнорируется, если присутствует автовоспроизведение.

    width: Устанавливает ширину в пикселях окна, внутри которого отображается видео. Пример: width = "640".

  • Следующая разметка отображает фрагмент видеоролика из Википедии:

Браузер не поддерживает видео в формате HTML5, предоставляемое альтернативное воспроизведение.

 

На рисунке показано, как эта страница находится в правильно сконструированном HTML-файле с некоторым дополнительным текстом и информацией выглядит как на экране в Chrome, сразу после завершения видеозаписи ». Панель управления для видео почти идентична панели управления аудио.

Разница заключается в том, что на панели управления видео есть рамка Обратите внимание также на то, что альтернативы для воспроизведения видео работают так же, как и для обратной связи с аудио, поэтому вы можете сначала убрать свой предпочтительный игрок для браузеров HTML5, если они могут, а затем других игроков в любом порядке, который вы предпочитаете .