Сталкиваюсь с ситуацией, что порой людям хочется разместить на сайте видео. а учитывая, что самый распространённый тип — avi, ситуация меняется следующим образом: «как мне разместить на своём сайте видео avi».
Спешу обрадовать: никак. Универсальный способ есть, но он, фактически, один: использование флеш. Таким образом, без конвертирования всё равно не обойтись. Но это сейчас. В будущем обещают ввести тег video в html5, который будет отвечать за проигрывание контента. “Вот оно, светлое будущее”, радостно потирают руки веб-мастера и… самодовольно обламываются.
Как оказалось, в мире не только несколько видео-форматов, но и несколько браузеров (браузер: то самое окошко с мельтешащей буквой e; тот самый ‘синий’, а не ‘оранжевый/красный/etc.’ интернет). Доля ie составляет уже не >2/3, как раньше. Поэтому ви́дение основного формата ‘видео для video’ майкромягкими далеко не всегда совпадает с мнением остальных разработчиков браузеров. Но лучше отвлечься от войн браузеров, потому что ВСЕГДА побеждает тот, у кого больше денег (в крайнем случае, можно купить конкурента и, таким-образом, всё-равно победить).
Обратившись к первоисточнику, можно найти весьма примечательную фразу: использование форматов Ogg/Theora/Vorbis и MP4/H.264/AAC покрывает большинство случаев (если не все). Фраза хороша, но актуальна для браузеров, поддерживающих тег video.
Ага — решит любознательный — и какой же из форматов выбрали основные производители браузеров?
Разработчики firefox и opera отдали предпочтение формату Ogg Theora;
Разработчики ie9 (ie8 и ниже тег video не поддерживают!) и safari (что неудивительно) предпочли H.264;
Разработчики chrome, чтобы остаться в выигрыше (тоже весьма объяснимо для сравнительного молодого браузера), поддерживают оба формата.
И вот, собственно, именно с этого и начинаются пляски с бубнами (да и с остальными мастями тоже).
Для начала, неплохо разобраться с тегом video, что это вообще за зверь? Внешне он немного похож на object: во внешний контейнер вставляются дополнительные элементы, определяющие тип и местонахождение проигрываемого контента.
Для примера:
<video controls="controls" width="320" height="240" src="file.ogv">
<p>not support video</p>
</video> <video controls="controls" width="320" height="240">
<source src="file.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>not support video</p>
</video>В первом примере показан «укороченный» вариант. Содержимое между открывающим и закрывающим тегом video будет выведено в случае, если браузер не поддерживает воспроизведение *.ogv-файлов.
Второй пример инетереснее. в нём показывается, как именно можно «впихнуть» внутрь тега разносортное содержимое. Как и в первом случае, если файл не поддерживается, будет выведено предупреждение.
Теперь можно вспомнить комментарий w3 и привести вариант, рабочий для почти всех (“если не всех”) браузеров (ещё раз повторюсь: это актуально только для браузеров, знакомых с тегом video):
<video controls="controls" width="320" height="240">
<source src="file.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="file.mp4" type='video/mp4; codecs="avc1, mp4a"'>
<p>not support video</p>
</video>Таким образом, если браузер не поддерживает *.ogv, будет воспроизведён *.mp4, и наоборот. Если же ни один формат не поддерживается, пользователь увидит сообщение о недопустимом типе файла.
Может возникнуть естественный вопрос: а какой файл воспроизведётся, если поддерживаются оба формата? Воспроизведётся тот, который ближе к открывающему тегу video. Так что не нужно бояться, что браузер начнёт воспроизводить сразу оба файла, или файлы вступят в конфликт.
Замечательно, задел на будущее есть. Правда, произошло столкновение с неприятностью: все файлы требуется конвертировать в 2 формата. Да?
Нет!
Будущее — это хорошо, но без “настоящего” оно невозможно. А настоящее — целая толпа пользователей с браузерами internet explorer 8 и ниже. Таким образом, окончательный код вышеописанного безобразия ещё сильнее разрастётся:
<video controls="controls" width="320" height="240">
<source src="file.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="file.mp4" type='video/mp4; codecs="avc1, mp4a"'>
<object width="320" height="240"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="file.avi">
<param name="width" value="320">
<param name="height" value="240">
<param name="AutoStart" value="1">
<embed src="file.avi"
type="application/x-mplayer2"
width="320" height="240"
AutoStart="1"></embed>
</object>
<p>not support video</p>
</video>В данном примере посредством тега object в страничку внедряется элемент управления Windows Media Player (привет твикерщикам, его удалившим).
В тегах param/embed можно, конечно, указать mp4/ogv файл, но всё-таки *.avi является для windows «родным», поэтому проблем с воспроизведением должно быть меньше.
Полный листинг можно скачать отсюда. Для корректной работы в папочку с html-файлом требуется поместить файлики: file.mp4, file.ogv, file.avi (можно взять из своей коллекции или где-нибудь в интернете).
PS: браузеры постоянно развиваются и совершенствуются; в них появляются новые возможности и изменяются старые. Вполне может быть, что создателям firefox/opera придётся пересмотреть свои позиции, и общепринятым форматом станет H.264. Но пока этого не случилось, можно использовать «универсальное лекарство» — флеш. Adobe Flash Player, начиная с версии 9.0.115.0, поддерживает H.264 и AAC.
днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости
продлением хостинга на +1 месяц
Автор публикации
(1 голосов, в среднем: 5,00 из 5)
Загрузка...
