08. Какой формат видео мне выбрать в HTML5?

Из-за отсутствия связи между производителями браузеров не существует единого универсального формата для сохранения видеофайлов для встраивания в технологию HTML5. Спецификация HTML5 не определяет конкретный формат видеофайлов, которые должны быть помещены в тег VIDEO. Свободно, каждый браузер реализовал поддержку видеокодеков в соответствии со своим собственным смыслом / убеждениями / преимуществами. В следующей части статьи мы поможем вам подготовить видеофайл, чтобы каждый мог его просмотреть. Мы представим необходимые инструменты и HTML-код, который будет включать отсталых пользователей, использующих старый браузер, который не поддерживает технологию HTML5.

Вначале мы представим проблему обработки различных форматов видео различными браузерами.

* - вскоре услуга будет удалена, как заявлено производителем.
** - только когда пользователь Windows устанавливает его на компьютер (по умолчанию система не предоставляет его).

Чтобы понять сокращения в левой части таблицы, нам нужно изучить основы видеофайлов. Как правило, когда мы просим кого-то описать такой файл, мы можем услышать, например, «это файл AVI». По сути, AVI или любое другое расширение видеоклипов - это просто информация о том, как записывать данные. Как и ZIP-слово, оно не предоставляет информацию о том, что в нем, но указывает, как эти данные хранятся. Таким образом, в дополнение к контейнеру данных (здесь: упомянутый AVI) мы должны знать, какие файлы находятся в контейнере. Фильмы содержат - как вы можете легко догадаться - изображение и саундтрек. И только информация о том, для какого алгоритма были закодированы оба пути, все еще необходима. Таких кодеков много. Нас должны интересовать только 3 кодека изображений: H.264, Theora и VP8 и 2 аудиокодека: AAC и Vorbis. Таким образом, у нас уже есть полный набор информации, чтобы мы могли узнать, может ли определенный файл воспроизводиться в определенном браузере или нет.

Ниже приведены пояснения к аббревиатурам, которые появляются в таблице, описывающей поддержку видеоформатов различными веб-браузерами:

  • WebM - файлы с расширением * .webm, кодек изображения VP8, кодек Vorbis
  • OGG - файлы с расширением * .ogv, изображение кодека Теория, кодек Vorbis
  • MP4 - файлы с расширением * .mp4, кодек изображения H.264, аудиокодек AAC

Еще раз посмотрев на таблицу и объяснив аббревиатуры, можно легко увидеть отсутствие одного оптимального формата записи фильма. Принятие решения по любому из них, и поэтому мы подвергаем некоторую аудиторию невозможности воспроизвести фильм. Это не проблема, когда мы хотим поделиться праздничным видео на нашем частном сайте. Хуже того, если сайт должен быть доступен всем, без исключения, с полным контентом, включая фильм. Затем нам нужно подумать о подготовке фильма как минимум в двух форматах: MP4 (IE9, Chrome) и OGG (Opera, Firefox). Мы покажем вам, как сделать это шаг за шагом! Это действительно кусок пирога.

Во-первых, у нас должен быть фильм (ик). В принципе, это может быть любой фильм, даже снятый с помощью мобильного телефона или фотоаппарата. Мы будем использовать трейлер Toy Story 3, чтобы показать вам интересную функцию, которую многие из вас упустят при просмотре YouTube. Мы рекомендуем вам посетить сайт Вождение пробной версии IE выберите фильм «История игрушек» и щелкните правой кнопкой мыши в области фильма. Затем выберите «Сохранить видео как ...» из контекстного меню.

» из контекстного меню

@ @ HOME

У нас уже есть видео файл. Теперь нам нужно преобразовать его в два формата, чтобы каждый посетитель мог воспроизвести его в своем браузере. Самое простое решение - использовать программу Miro Video Converter , Мы скачиваем, устанавливаем и запускаем. Сам процесс преобразования просто перетаскивает файл в окно программы и выбирает формат. Theora является первой в списке - она ​​соответствует нашему обозначению OGG согласно таблице соответствия. WebM - это WebM , а MPEG4 из таблицы - это позиция iPhone в программе Miro VideoConverter . Выбираем Theor и запускаем конвертацию (кнопка Convert ). Мы предупреждаем, что относительно небольшие файлы с небольшими размерами могут конвертировать в течение длительного времени! Как только процесс будет успешным, мы меняем формат на iPhone и снова конвертируем, вооружившись терпением. В результате у нас есть два файла.

Теперь стоит открыть эти файлы и проверить, не привела ли конверсия к значительной потере качества. Если окажется, что мы не удовлетворены конечным результатом или размером файла, мы можем использовать расширенные инструменты, которые позволят вам настроить многие параметры, которые вообще не доступны в обычном Miro Video Converter . Мы представим образец возможностей программы Ручной тормоз и мы укажем функции, которые следует учитывать при подготовке файла для доступа в Интернет. Давайте начнем с самого начала.

Мы загружаем Handbrake , устанавливаем и запускаем его. Мы указываем файл, который будет служить исходным файлом (кнопка « Источник» ). Мы можем игнорировать уведомление о том, что по умолчанию нет места для хранения. Выберите iPhone и iPod Touch справа. Мы ищем оптимизированный веб- вариант в центре экрана и выскакиваем. Это очень полезная функция, которая изменит организацию данных, чтобы вы могли видеть начало фильма, а остальные будут выделены в фоновом режиме. Это никак не сказывается на качестве пленки.

Мы можем отрегулировать размер фильма в соответствии с вашими предпочтениями на вкладке « Изображение ». Стоит помнить, чтобы сохранить соотношение ширины к высоте. В противном случае символы в полученном фильме, например, будут растянуты.

Видеокодек можно выбрать на вкладке « Видео ». Мы рекомендуем вариант двойного кодирования: 2-Pass Encoding. Это значительно улучшает качество фильма после конвертации, поскольку весь процесс делится на два этапа. Первый - это анализ, а второй - это преобразование с учетом определенных шаблонов, обнаруженных при анализе содержимого файла. В любом случае, время, необходимое для конвертации файла, удваивается, но мы выигрываем в качестве.

В любом случае, время, необходимое для конвертации файла, удваивается, но мы выигрываем в качестве

@ PAGE @ Кстати, нельзя забывать об основной опции контроля качества выходного файла. Он находится на той же вкладке справа. Здесь мы можем установить определенный размер файла, который в конечном итоге будет иметь конвертированный фильм ( Target Size ). Программа автоматически выберет качество. Мы также можем указать средний битрейт ( Avg Bitrate ) или указать процент, переместив ползунок ниже. Пользуясь случаем, стоит отметить, что двукратное увеличение стоимости не улучшит качество, которое мы могли бы оценить как «вдвое больше». Лучше всего поэкспериментировать и выбрать оптимальные параметры для своих нужд.

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

У нас уже есть все необходимое для встраивания видео на сайт. Встраивание этого видео будет включать размещение тега <video> и подключение нескольких источников мультимедийного потока. Браузер просматривает источник один за другим и воссоздает первый, который сможет обработать. Чтобы браузер не проверял все исходные файлы один за другим, тратя впустую передачу, необходимо указать тип источника.

<video width = "400" высота = "300" элементы управления>
<source src = "film.mp4 type = 'video / mp4; codecs =" avc1.42E01E, mp4a.40.2 "'>
<source src = "film.webm type = 'video / webm; codecs =" vp8, vorbis "'>
<source src = "film.ogv type = 'video / ogg; codecs =" theora, vorbis "'>
Ваш браузер не поддерживает <VIDEO> в HTML5!
</ Видео>

Атрибут type элемента <source> не так страшен, как кажется. Он должен содержать набор из 3 фрагментов информации, необходимых для проверки того, поддерживает ли браузер воспроизведение фильма. Напомним, что они являются контейнером данных и видео- и аудиокодеком.

В заключение обратите внимание, что замена сообщения об отсутствии поддержки тега <video> может быть легко заменена другим кодом. Это дает прекрасную возможность создателям сайтов, которые не хотят оставлять старые версии браузеров на льду. Все, что им нужно сделать, это поместить код для встраивания объекта ( тег <object> ) и разместить другой проигрыватель, например, FlashPlayer на основе Flash . Пример кода будет:

<object width = "400" height = "300" type = "application / x-shockwave-flash"
данные = "Flowplayer-3.2.1.swf">
<param name = "movie" value = "flowplayer-3.2.1.swf" />
<param name = "allowfullscreen" value = "true" />
<param name = "flashvars" value = 'config = {"clip": {"url": "http://www.centrumxp.pl/film.mp4", "autoPlay": false, "autoBuffering": true} } '/>

Принцип прост. Мы пытаемся навязать использование технологии HTML5, и если мы не можем этого сделать, мы используем Flash, что происходит согласно статистике на 99% компьютеров. Так что цель достигнута!