Меню Закрыть

Тег video не работает

Раньше, если вы хотели добавить видео на веб-страницу, вам приходилось использовать элемент

Таблица 1. Атрибуты тега

АтрибутОписание, принимаемое значение
autoplayАвтоматическое воспроизведение видеоофайла сразу же после загрузки страницы.
controlsУказывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость).
heightЗадает высоту окна для отображения видеоданных, возможные значения: px или %
loopЦиклическое воспроизведение видеофайла.
mutedВыключает звук при воспроизведении видеофайла.
posterURL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.
preloadАтрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения:
auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение.
metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики.
none — отсутствие автоматической загрузки видеофайла.
srcСодержит абсолютный или относительный URL-адрес видеофайла.
widthЗадает ширину окна для отображения видеоданных, возможные значения: px или %

2. Встраиваемый интерактивный контент

Элемент определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью на веб-страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf :

Читайте также:  Как на самсунге поставить переадресацию вызовов

Таблица 2. Атрибуты тега

АтрибутОписание, принимаемое значение
heightОпределяет высоту встраиваемого контента в px или % .
srcСодержит абсолютный или относительный URL-адрес медиафайла.
typeОпределяет MIME-тип встраиваемого файла.
widthОпределяет ширину встраиваемого контента в px или % .

3. Видеокодеки

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

Важно! Поскольку каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео-контента во всех браузерах, видео-файл нужно размещать в нескольких форматах.

H.264 — высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения.

Ogg Theora — открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H.264.

VP8 — открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в Firefox, Chrome и Opera.

4. Видеоконтейнеры

Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие:

Ogg (.ogv, .oga, .ogx, .ogg) — формат-контейнер с открытым исходным кодом для видеокодека Theora и аудио Vorbis. Работает в Firefox, Chrome и Opera.
MIME-тип: video/ogg .

MPEG 4 (.mp4) — формат-контейнер для видеокодека H.264 и аудиокодека AAC. Работает в Safari и Chrome. Кодирует видео, в том числе высокой четкости, для полного спектра устройств, таких как iPhone, iPod и iPad.
MIME-тип: video/mp4 .

WebM (.webm) — формат-контейнер с открытым исходным кодом для видеокодека VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player.
MIME-тип: video/webm .

Читайте также:  Starcraft 2 nova covert ops дата выхода

Audio Video Interleave (.avi) — формат предназначен для записи звука и движущихся изображений, соответствует спецификации RIFF.
MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo .

Matroska (.mkv) — популярный видеоконтейнер, может содержать видео в формате H.264, VP8 или Theora.
MIME-тип: video/x-matroska, audio/x-matroska .

На данный момент браузеры поддерживают три основных видео формата:

ФорматВидеокодекАудиокодек
.mp4H.264AAC
.ogg/.ogvTheoraVorbis
.webmVP8Vorbis

Видео в формате .avi на сайте средствами HTML5 не воспроизводится. Поэтому его необходимо перекодировать в эти три формата с соответствующими видео и аудиокодеками для вывода на сайте. Для этого можно использовать видеоконвертеры, указанные на странице ниже.

5. Альтернативные медиа-ресурсы

Таблица 3. Атрибуты тега

АтрибутОписание, принимаемое значение
mediaОпределяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).
srcСодержит абсолютный или относительный URL-адрес медиафайла.
typeОпределяет MIME-тип медиафайла.

6. Добавление субтитров и заголовков

Таблица 4. Атрибуты тегаможет содержать данный атрибут.

АтрибутОписание, принимаемое значение
defaultУказывает, что данная дорожка воспроизводится по умолчанию. Только один элемент
kindУказывает тип текстовой дорожки, по умолчанию выводятся субтитры ( subtitles ). Принимаемые значения:
captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей).
chapters — добавляет названия глав в виде списка для навигации по медиафайлу.
descriptions — добавляет звуковое описание происходящего в видео (для невидящих пользователей).
metadata — метаданные, используемые скриптами, не отображаются для пользователей.
subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
labelДобавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
srcСодержит абсолютный или относительный URL-адрес аудио- или видеофайла.
srclangЯзык воспроизводимой дорожки.
Читайте также:  Fallout 4 очень высокая сложность

7. Пример: размещаем видео на сайте

1. Декодируем видео в три файла с соответствующими видео и аудиокодеками:
для .mp4 — H.264/AAC,
для .webm — VP8/Vorbis,
для .ogv — Theora/Vorbis.
2. Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя атрибуты для задания видео требуемых параметров:

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

8. Видеоконвертеры

Movavi — позволяет конвертировать видео и аудио в необходимый вам формат. Сохраняет медиафайлы для проигрывания на мобильных устройствах. «Умные» готовые профили позволяют добиваться максимального качества.


Перейти на сайт

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


Перейти на сайт

Firefogg — модуль расширения для Firefox, может создавать видеофайлы Theora и WebM. Работает непосредственно в браузере, но вся работа выполняется локально без обращения к веб-серверу.


Перейти на сайт

Теги HTML

Атрибуты

Закрывающий тег

HTML5 IE 9 Cr Op Sa Fx

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение видеофайла

Браузеры

Firefox поддерживает кодек WebM начиная с версии 4.0.

На страничке такая строчка

Когда я захожу на сайт с хрома, то видео не запускается. Например если открыл новую вкладку и набрал адрес или нажал f5, то видео не запускается. Но если я перейду на страницу через ссылку, то оно запускается.
Если на странчке играет видео и я ее обновлю f5, то опять не работает, но если обновлю ссылкой ведущей сама на себя [a href=""] то видео работает.
Как понять в чем проблема?

Рекомендуем к прочтению

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code

Adblock detector