Видео и аудио контент

Содержание:

Тег
- Видео форматы и поддержка браузерами
Добавление аудио на HTML страницу
Вопросы и задачи по теме
Как разместить видеоматериалы на сайте
Способы создания сайтов
Вставка видео на веб-страницу
Почему видео лучше заливать на Youtube, а не на свой сайт
Атрибуты
Способ № 1. Вставка медиа-контента (видео) посредством тегов HTML5
Адаптивное видео c Youtube
Как использовать audio и video в HTML5
КАК Я ИСПОЛЬЗУЮ YOUTUBE-ВИДЕО В БЛОГЕ
Встраивание проигрывателя во фрейм
Управление цифровыми правами (зашифрованные расширения мультимедиа)
Атрибуты OBJECT
Атрибуты¶

Тег

Элемент <video> встраивает цифровое видео на веб-страницу. Как и в случае с <audio>, элемент <video> может иметь атрибут src, указывающий URL-адрес видеофайла:

<video src="video/file.mp4" controls></video>

Атрибут controls добавляет элементы управления, с помощью которых пользователь сможет взаимодействовать с плеером. Атрибут autoplay указывает браузеру, что видео должно начать воспроизведение сразу, как только страница будет загружена, если он не указан, то в плеере будет отображен первый кадр исходного видео. Но чаще всего он не несет никакой полезной информации о том, что будет представлено с помощью видео-контента. Вместо этого можно предоставить любое изображение, указав к нему путь в атрибуте poster:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
  </head>

  <body>

    <video width="320" height="240" controls="controls" poster="logo.png">
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
	  Ваш браузер не поддерживает тег video.
    </video>

  </body>
</html>

Попробовать »

Элемент <video> также может содержать один или несколько элементов <source>, которые будут указывать на файлы разных форматов:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
  </head>

  <body>

    <video width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    </video>

  </body>
</html>

Попробовать »

Видео форматы и поддержка браузерами

В настоящее время, существует 3 поддерживаемых видео формата для элемента <video>: MP4, WebM и Ogg.

Браузер	MP4	WebM	Ogg
Internet Explorer 9 или выше	да	нет	нет
Firefox 4.0 или выше	нет	да	да
Google Chrome 6 или выше	да	да	да
Apple Safari 5 или выше	да	нет	нет
Opera 10.6 или выше	нет	да	да

Добавление аудио на HTML страницу

Как сделать транскрибацию аудио и видео в текст: лучшие способы

Формат аудио файла определяет структуру и особенности представления звуковых данных при хранении на носителе (запоминающее устройство). Для устранения избыточности аудиоданных, как правило, используются специальные аудиокодеки, благодаря которым производят сжатие аудиоданных. Современные браузеры поддерживают следующие 3 формата аудио:

Браузер	MP3	Wav	Ogg
Chrome	ДА	ДА	ДА
Firefox	ДА	ДА	ДА
Opera	ДА	ДА	ДА
Safari	ДА	ДА	НЕТ
IE	ДА	НЕТ	НЕТ
Edge	ДА	ДА	НЕТ

Формат MP3 — это кодек и контейнер одновременно. Он широко используется повсеместно для размещения скачиваемой музыки.
Формат WAV – также кодек и контейнер одновременно.
Контейнер Ogg + аудио кодек Vorbis. Его обычно называют «Ogg Vorbis». Был разработан сообществом Xiph для того, чтобы заменить собой запатентованные MP3, AAC и WMA.

Элемент <audio> использует те же атрибуты, что и элемент <video>, за исключением атрибутов width (ширина), height (высота) и poster (изображение, которое отображается до воспроизведения видео). По аналогии с использованием элемента <video>, вы можете предоставить несколько вариантов аудио форматов с помощью элемента <source>, как показано в примере ниже:

В этом примере мы:

Добавили на страницу аудио-контент (тег <audio>), атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

Использовали тег <source>, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы браузера необходимо указывать в тегах <source> атрибут type (MIME-типы для аудио):

Формат	MIME-типы
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

Результат нашего примера:

Рис. 51 Добавление аудио на страницу.

Допускается добавлять аудио файлы с использование упрощенного синтаксиса (без использования тега <source>), но такая запись будет актуальна если все браузеры поддерживают данный формат аудио:

Вопросы и задачи по теме

Как перевести аудио звук или видео ролик в печатный текст. мой опыт транскрибирования

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Добавьте на страницу произвольный видео файл, который поддерживает ваш браузер, в первом случае укажите путь к файлу, используя элемент <source>, во втором, используя сокращенный синтаксис. Сделайте так, чтобы ваш видео файл автоматически запускался снова после завершения воспроизведения.

Подсказка: не используйте файл, предназначенный для просмотра зрителями возрастной категории 18+, это может затянуть изучение HTML 5.
Добавьте на страницу произвольный аудио файл, который поддерживает ваш браузер, в первом случае укажите путь к файлу, используя элемент <source>, во втором, используя сокращенный синтаксис. Сделайте так, чтобы ваш аудио файл запустился автоматически, как только он будет готов.

Построение изображения-карты

Размещение видео с YouTube

Как разместить видеоматериалы на сайте

Что такое контент-план простыми словами: для чего он нужен, как его составить + шаблон и пример контент-плана

Способов всего два:

Загрузить файл на хорстинг, где размещен ваш сайт. Дальше подключить видео плеер и показывать медиаролик посетителям. Но у этого метода целых два недостатка. Во-первых, при большом числе одновременных просмотров, создается огромная нагрузка на сервер хостера. Это в свою очередь может привести к тому, что хостер наложит ограничения на сайт или даже временно отключит его, из-за превышения допустимой нагрузки. А во-вторых, видеоролики занимают много места на сервере, а оно тоже ограничено вашим тарифным планом.
Трансляция видео, предварительно загруженного на Ютуб. Ссылка со специальным кодом позволит легко вставить на сайт видео с Youtube. И это не только позволит сэкономить ресурсы сервера, не создавая никакой нагрузки на него, но и позволит привлечь дополнительную аудиторию из популярного видеохостинга.

Способы создания сайтов

Итак, web-сайты – возможность представить информацию интерактивно. Как известно, интернет-ресурсы состоят из страниц, которые взаимосвязаны между собой гиперссылками. Как можно создать собственный сайт?

Использовать технологию блоггинга. Что это значит? Зарегистрироваться на сайте и получить доменное имя второго уровня. Благодаря такой возможности владелец сайта становится администрацией своего ресурса и получает доступ к специальной панели. При помощи нее можно трансформировать «детище» по своему вкусу.
Воспользоваться разработанными многочисленными конструкторами сайтов, по типу ucoz.ru, jimdo.com, setup.ru, Wix.com, A5.ru, Fo.ru, rusedu.net и т. д.
Разработать интернет-ресурс посредством CMS, т. е. системы управления сайтом.
Спроектировать собственный дизайн «детища» и воссоздать его посредством языка программирования HTML.

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

Вставка видео на веб-страницу

HTML5

Начнем с разметки HTML, в ней используется универсальное объявление doctype <! DOCTYPE html>. Это первое, с чего начинается любой HTML-документ. Оно нужно для того, чтобы браузер был в курсе, какой документ вы используете.

Теперь перейдем к элементам, которые нужно включить в HTML: <head> и <body>. Сейчас мы должны сосредоточиться на том, что происходит в body. Вы не сможете создать видео без тега <video>. Внутри <head> вставляем <video>.

Теперь в теге <video> нужно указать, какие размеры должен иметь плеер (рекомендуется установить размеры плеера, чтобы избежать мерцания). Источник видео, которое вы хотите воспроизвести в плеере, и изображение обложки. Это будет презентацией видео, которое зрители увидят, прежде чем нажмут кнопку «Play».

Теперь рассмотрим доступные атрибуты и посмотрим, как они работают.

Атрибут poster — он нужен для создания изображения-презентации вашего видео. В нем необходимо указать папку с изображением (в данном случае «Images») и название файла. Затем нужно выбрать ширину и высоту плеера. Я решил выбрать симметричную форму.

Чтобы собрать плеер для сайта, важно вставить атрибут «controls». Без него вы можете управлять своим видео только правой кнопкой мыши, а затем выбрать «Воспроизвести» или другие основные функции. Тег отображает основной массив элементов управления: кнопки «Воспроизвести», «Пауза», «Громкость» и кнопку полноэкранного режима для более удобного использования функций

Тег отображает основной массив элементов управления: кнопки «Воспроизвести», «Пауза», «Громкость» и кнопку полноэкранного режима для более удобного использования функций.

Далее идет тег <source>, в котором необходимо указать атрибут src с источником видео. Поскольку вы уже создали папку для видеоплеера, источник видео будет легко распознаваться кодом, достаточно просто указать имя конкретного видеофайла.

Поскольку тег <video> поддерживает три формата видео (MP4, WebM и Ogg) необходимо указать в атрибуте type, какой из них используется. Для удобства пользователей рекомендуется использовать как можно больше версий видео. Поэтому, если у вас есть .ogg-версия видео, нужно открыть еще один тег <source>. Например: <source src = «videoexample.ogg» type = video / ogg>.

Теперь, если вы нажмете кнопку «Video Preview» (Предварительный просмотр видео), то увидите базовый видеоплеер с обложкой, кнопками управления и видео, которое корректно воспроизводится в пределах выбранного размера.

Почему видео лучше заливать на Youtube, а не на свой сайт

Уверен у многих возник вопрос: как добавить видео, которое лежит на компьютере, а в интернете его нет? Тут есть 2 варианта:

Загрузить на свой хостинг;
Загрузить на Ютуб.

Первый вариант подойдет только в том случае, если видео секретное и не предназначено для широкой публики. Если это не так — не ломайте себе голову и воспользуйтесь вторым способом! Почему, спросите вы. Все просто: во-первых, видео часто весит довольно много, а у каждого хостера есть ограничения на объем файлов, которые он вам предоставил. Переходить на более дорогой тариф только из-за видео — непозволительная глупость!

Во-вторых, если видео-файл лежит у вас на хостинге, то каждый просмотр — создает лишнюю нагрузку на сервер, она вам нужна?)

Преимущества размещения на сервисе Youtube очевидны — неограниченное пространство, и вся нагрузка ложится на Ютуб.

Теперь, когда вы знаете как вставить видео на свой блог, я прощаюсь с вами. Добавляю видео, как обещал. Посмотрите, очень красиво сняли.

Атрибуты

Атрибут	Значение	Описание
autoplay	autoplay	Указывает, что видео запустится автоматически, как только оно будет готово.
controls	controls	Отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
height	pixels	Устанавливает высоту видео проигрывателя.
loop	loop	Зацикливает воспроизведение файла (наша песня хороша – начинай сначала).
muted	muted	Указывает, что видео будет заглушено (без звука).
poster	URL	Задает изображение, которое отображается в то время пока видео загружается, или пока пользователь не нажмет кнопку воспроизведения.
preload	autometadatanone	Указывает как видео должно загружаться при загрузке страницы. Атрибут игнорируется, если присутствует атрибут autoplay.
src	URL	Указывает URL адрес видео файла.
width	pixels	Устанавливает ширину видео проигрывателя.

Способ № 1. Вставка медиа-контента (видео) посредством тегов HTML5

Существует несколько способов вставки видео контента на веб-страницу. Выделяют три варианта: вставка посредством HTML, плеера или YouTube. Для начала нужно создать обычный HTML5-файл, который будет содержать в себе стили страницы и несколько подзаголовков. После подготовки можно выбирать один из методов и наслаждаться результатом.

Найти третий заголовок и прописать код прямо под ним:
Открыть страницу в браузере и убедиться в появлении видео.
Обязательно нужно правильно прописать путь к ролику.
Чтобы вставка видео в HTML была грамотной, нужно разметить панель контроля видео. За это отвечает параметр controls.

Следует учесть, что такой способ примечателен не для всех. К примеру, в браузере Opera видео, размещенное таким способом, воспроизводиться не будет. Чтобы избежать такой ситуации, нужно конвертировать видеоролик в тип Ogg Theora, изменить код.

Конвертировать файл можно посредством сервиса online-convert.com. Затем нужно изменить код на такой:

Если старый браузер не понимает какой-то тег, тогда код может выглядеть следующим образом.

Адаптивное видео c Youtube

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

Чтобы реализовать адаптивное видео на сайте вставляете HTML код с Ютуба, Vimeo и любого другого сервиса внутрь нового DIV:

<div class="adaptive-wrap">
   <iframe width="640" height="360" src="https://www.youtube.com/embed/KiS8rZBeIO0" frameborder="0" allowfullscreen></iframe>
</div>

Затем в стилях прописываете:

.adaptive-wrap {
  position relative;
  padding-bottom 56.25%; 
  padding-top 30px;
  height ;
  overflow hidden;
}
.adaptive-wrap iframe {
  position absolute;
  top ;
  left ;
  width 100%;
  height 100%;
}

Тут есть 2 нюанса:

Если плеер добавляется через object и embed, то для них также задаете аналогичные стили как с iframe.
В первом селекторе стилей параметр padding-bottom: 56.25%; соответствует пропорциям ролика 16:9, если нужен формат 4:3 — используйте значение 75%.

Сниппет для автоматизации процесса (оборачивает iframe в DIV с нужным стилем, но CSS все равно нужно добавить):

add_filter('the_content', 'filter_iframe');
function filter_iframe($html){
	$html = preg_replace('/<iframe (.*?)>(.*?)<\/iframe\>/is', '<div class="adaptive-wrap"><iframe $1>$2</iframe></div>', $html);	
	return $html;
}

Как использовать audio и video в HTML5

Чтобы создать плеер, достаточно такого кода для аудио:

</audio>

И такого — для видео:

Атрибут controls используется для того, чтобы отобразить элементы управления. Если его не указать, никакого интерфейса не будет: аудиоплеер не будет отображаться, а в видеоплеере просто будет показан кадр из видео или постер.

Обратите внимание, как указан источник. Для видео достаточно прописать атрибут src, а для аудио нужно прописывать дополнительные элементы source, чтобы указать пути и формат файлов

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

Также внутри плеера можно прописать какой-нибудь текст — его увидят те, у кого не поддерживается HTML5. Правилом хорошего тона считается указание ссылки на скачивание современного браузера.

Вот список атрибутов, которые можно указать для плеера:

controls — панель управления;
autoplay — автовоспроизведение;
loop — цикличность;
muted — выключение звука;
poster — обложка видео. Если не указать, будет выбран случайный кадр;
preload — предварительная загрузка. Существует 3 значения: auto (полностью), metadata (небольшую часть, чтобы определить основные метаданные) и none (без загрузки);
src — ссылка на файл.

Также можно указать высоту и ширину.

Существует элемент <track>, который размещается внутри плеера, — в нем указывается путь к текстовым файлам: субтитрам или метаданным. Для них прописываются следующие атрибуты:

default — указывает на дорожку, которая используется по умолчанию;
kind — тип файла, можно указать следующие значения:
subtitles — субтитры (стоит по умолчанию),
captions — субтитры для глухонемых,
chapters — название глав и их временные рамки,
descriptions — звуковое описание происходящего для слепых,
metadata — метаданные;
label — название дорожки;
src — путь к файлу;
srclang — язык дорожки.

Всего этого достаточно, чтобы вставить простой плеер на сайт, но некоторых функций у него все-таки нет:

можно убрать звук, но нельзя регулировать громкость;
нельзя менять скорость воспроизведения;
нельзя поставить на повтор и так далее.

Поэтому мы подключаем JS и пишем свой интерфейс.

КАК Я ИСПОЛЬЗУЮ YOUTUBE-ВИДЕО В БЛОГЕ

Я сама веду свой блог, обучаясь в бесплатном тренинге, где мне уже пояснили, что записывать ролики – это очень хорошо и, помимо перечисленных выше плюсов, позволяет ещё и свой канал на ютубе развивать, что уже сейчас даёт мне дополнительный трафик на блог.

Правда, роликов у меня отснято ещё очень мало, ввиду небольшого опыта в этом деле, но я стараюсь. Сейчас я уже научилась многому, качество моих видео раз за разом растет.

То есть, говоря простыми словами, одним видеороликом я убиваю сразу двух зайцев: и ютуб-канал развиваю, и свой онлайн-дневник. Ах да, и конечно, реализую свой творческий потенциал! В общем, куда не посмотри – одни плюсы.

Встраивание проигрывателя во фрейм

Для начала предалагаю рассмотреть пример, в котором используется рекомендованный способ добавления видео. И так, для добавления видео на страницу сделайте по порядку следующие действия:

Если вы хотите использовать на сайте ваше видео, то необходимо его предварительно загрузить на YouTube, для этого необходимо иметь аккаунт и провести минимальные настройки своего канала (будем считать что этот шаг Вами пройден).
Запишите ID видео (последние символы в адресной строке ?v=VIDEO_ID).
Определите размеры <iframe> элемента на вашей веб-странице (атрибуты width и height). Хочу сразу подчеркнуть, что встраивать проигрыватель с помощью элемента <iframe> является лучшей практикой, таким образом вы предоставите пользователю оптимальные условия просмотра вне зависимости от типа его устройства или формата воспроизводимого файла).
Если вы пропустили тему, посвященную фреймам в HTML, то рекомендую Вам к ней вернуться для изучения.

Примечание из официальной документации: Окно просмотра встроенного проигрывателя должно быть не меньше 200 x 200 пикселей. Если в проигрывателе отображаются элементы управления, окно должно быть достаточно большим, чтобы полностью отобразить элементы управления, не сжимая окно просмотра меньше минимального размера. Минимальный размер окна просмотра для проигрывателей формата 16:9 составляет 480 х 270 пикселей.
Добавьте путь к видео, используя атрибут src и записанный ранее ID необходимого видео (https://www.youtube.com/embed/VIDEO_ID).Справочно: Раньше региональные блокировки видео можно было обходить тем, что вместо /embed/ можно было указать /v/.

Давайте рассмотрим пример добавления видео с YouTube:

<!DOCTYPE html>
<html>
	<head>
		<title>Размещение видео с YouTube</title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<iframe  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0?autoplay=1?loop=1&start=28&color=white">
		</iframe>
	</body>
</html>

В этом примере элементом <iframe> мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width) и высоту 240 пикселей (height).
В атрибуте src мы указали путь к странице с видео, указали ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

autoplay = «1» (видео автоматически запускается).
loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
start = «28» (определяет с какой секунды начнется воспроизведение видео, значение должно быть положительным целым числом).
color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).

Результат нашего примера:

Рис. 52 Добавление видео с YouTube во фрейм.

Есть еще один способ, который позволяет формировать HTML код для размещения плеера YouTube с интересующим нас видео.
Для этого необходимо найти на YouTube это видео, пролистать под описание к видео, найти и нажать на кнопку «Поделиться».
После этого нам будет доступно меню в котором необходимо выбрать вкладку «HTML-код». У нас есть два варианта: сразу скопировать готовый код сформированный по умолчанию, либо нажать на вкладку «Еще» и провести более расширенную настройку:

Рис. 53 Настройка фрейма на сайте YouTube.

В расширенных настройках, к примеру, можно включить режим повышенной конфиденциальности, который указывает, что YouTube должен сохранять информацию о посетителях вашей веб-страницы, только если они посмотрят ролик.

Обратите внимание, что YouTube добавляет такие атрибуты как frameboarder, который отвечает за наличие, либо отсутствие рамки вокруг фрейма и атрибут allowfullscreen, который позволяет перевести плеер в полноэкранный режим.
Обращаю ваше внимание, что этих атрибутов нет в спецификации HTML 5, не смотря на это атрибут frameboarder убирает границы фрейма, но при валидации документа быдет указана ошибка. В HTML 5 рекомендуется границы элемента добавлять, либо убирать средствами CSS, подробно об этом мы изучим в учебнике CSS в статье «Границы элемента в CSS»

Управление цифровыми правами (зашифрованные расширения мультимедиа)

HTML поддерживает управление цифровыми правами (DRM, ограничение использования контента) через HTML5 Encrypted Media Extensions (EME). Добавление DRM вызывает споры, потому что оно позволяет ограничивать свободу пользователей использовать носители, ограниченные DRM, даже если добросовестное использование дает пользователям законное право на это. Основным аргументом в одобрении W3C EME было то, что видеоконтент в противном случае доставлялся бы в плагинах и приложениях, а не в веб-браузере.

В 2013 году Netflix добавила поддержку видео HTML5 с использованием EME, помимо старого метода доставки с использованием плагина Silverlight (также с DRM).

Атрибуты OBJECT

data – указывает путь к файлу объекта;type – тип обекта (не является обязательным). Например:

type=»application/x-shockwave-flash» или type=»image/png» и т.д.;

width – ширина;height–высота

Также можно прописать текст между открывающими тегами <object> </object>. Написанный текст будет отображаться в том случае, если браузер не поддерживает элемент object.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
<title>Тег OBJECT</title>
</head>
<body>
<object width="300" height="200" data="bloggood-ru.swf">
 Ваш браузер не поддерживает тег object
</object>
</body>
</html>

Результат данного примера в окне браузера, если он не поддерживает тег OBJECT:

Способ 3.

Вставить аудио на веб-страницу можно и тегом <AUDIO>:

<AUDIO SRC="sound.wav"></AUDIO>

Атрибуты¶

Видео начинает воспроизводиться автоматически после загрузки страницы.

Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект .

Добавляет панель управления к видеоролику.

Этот атрибут указывает, следует ли использовать CORS для извлечения связанного изображения.

Задаёт высоту области для воспроизведения видеоролика.

Повторяет воспроизведение видео с начала после его завершения.

Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. Если атрибут указан, то аудио дорожка воспроизводиться не будет. Значение атрибута по умолчанию — «ложь», и это означает, что звук будет воспроизводиться, когда видео воспроизводится.

Атрибут , указывающий все диапазоны воспроизводимого видео.

Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.

Используется для загрузки видео вместе с загрузкой веб-страницы.

Указывает путь к воспроизводимому видеоролику.

Задаёт ширину области для воспроизведения видеоролика.

autoplay

При наличии этого атрибута видео начинает воспроизводиться автоматически после загрузки страницы. Атрибут отменяет действие .

Синтаксис

Значения

В качестве значения указывается , также допустимо вообще не указывать никакое значение.

Значение по умолчанию

По умолчанию этот атрибут выключен.

controls

Добавляет панель управления к видеоролику. Вид панели и её содержимое зависит от браузера и может в себя включать кнопку воспроизведения, паузы, перемотки, перехода в полноэкранный режим; ползунка для изменения уровня громкости и др.

Синтаксис

Значения

В качестве значения указывается , также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

height

Атрибут задаёт высоту области для воспроизведения видеоролика. Само видео меняет свои размеры в большую или меньшую сторону, чтобы вписаться в заданные рамки, но его пропорции при этом остаются прежними.

Синтаксис

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

Исходная высота берётся из параметров видео. Если эти параметры не доступны, тогда принимается равной высоте картинке, заданной атрибутом . В противном случае высота видео устанавливается 150 пикселей.

loop

Зацикливает воспроизведение видео, оно повторяется каждый раз с начала после завершения.

Синтаксис

Значения

В качестве значения указывается , также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

poster

Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Само изображение может быть в любом доступном формате: GIF, PNG, JPEG. Если атрибут не указан, браузер постарается отобразить первый кадр видео.

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к графическому файлу.

Значение по умолчанию

Нет.

preload

Используется для загрузки видео вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен .

Синтаксис

Значения

Не загружать видео.

Загрузить только служебную информацию (размеры видео, первый кадр, продолжительность и др.).

Загрузить видео целиком при загрузке страницы.

Значение по умолчанию

src

Указывает путь к воспроизводимому видеоролику. Для этой же цели можно использовать элемент .

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

width

Атрибут задаёт ширину области для воспроизведения видеоролика. Само видео меняет свои размеры в большую или меньшую сторону, чтобы вписаться в указанную ширину, но его пропорции при этом не искажаются.

Синтаксис

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

Исходная ширина берётся из параметров видео, если это значение не доступно, тогда принимается равной ширине картинке, заданной атрибутом . Если этот атрибут не установлен, ширина устанавливается как 300 пикселей.