"CSS Live". Сверстай свой мир

Когда я проводил исследования по теме мультимедиа для моей книги «HTML5 Multimedia: Develop and Design», я заметил, что многие с трудом заставляют работать HTML5-аудио и -видео в разных сценариях. Одни и те же вопросы продолжают появляться в сервисах от Twitter'а до Stack Overflow, так что я составил список наиболее частых (и не очень частых) проблем и их решений (если таковые есть!).

В большинстве случаев проблемы и решения одинаковы для видео и аудио. Я буду отмечать, если что-то специфично для первого или второго.

Перед тем как я продолжу, хочу заметить: если вы не знаете, как на самом деле добавить аудио и видео на сайт с помощью HTML5, можете для начала прочитать множество других статей на этом сайте. Том Лидбеттер описал элемент video, а Марк Боас рассказал о нативном аудио в браузере и о HTML5-аудио – состояние воспроизведения.
Кроме того, я раскрыл темы видео и аудио в серии статьей на Adobe Developer Connection.

Поддержка в браузерах

Это одна из первых вещей, которые вы должны проверить: действительно ли поддерживает этот браузер тот формат, который вы пытаетесь воспроизвести? Довольно легко забыть, какие типы файлов поддерживаются разными браузерами, так что давайте освежим это в памяти:

Аудио

• Firefox поддерживает Ogg Vorbis и WAV;
• Opera поддерживает Ogg Vorbis и WAV;
• Safari поддерживает MP3, AAC, и MP4;
• Chrome поддерживает Ogg Vorbis, MP3, WAV, AAC, и MP4;
• Internet Explorer 9+ поддерживает MP3, AAC, и MP4;
• iOS поддерживает MP3, AAC, и MP4;
• Android поддерживает AAC и MP3.

Чтобы поддерживать все вышеупомянутые браузеры, советуют отдавать аудио-файл в Ogg Vorbis и MP3. Например:

<audio controls>
   <source src="myAudio.ogg" type="audio/ogg">
   <source src="myAudio.mp3" type="audio/mp3">
</audio>

Видео

• Firefox поддерживает Theora Ogg и WebM;
• Opera поддерживает Theora Ogg и WebM;
• Safari поддерживает MP4;
• Chrome поддерживает Theora Ogg, MP4, и WebM;
• Internet Explorer 9+ поддерживает MP4 и WebM (через плагин);
• iOS поддерживает MP4;
• Android поддерживает MP4 и WebM (2.3+);

Чтобы поддерживать все вышеупомянутые браузеры, нужно отдавать видео в WebM и MP4 при помощи элемента source. Например:

<video controls>
   <source src="myVideo.mp4" type="video/mp4">
   <source src="myVideo.webm" type="video/webm">
</video>

MIME-типы

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

AddType audio/ogg ogg
AddType audio/ogg oga
AddType audio/wav wav
AddType audio/mpeg mp3
AddType audio/mp4 mp4
AddType audio/mp4 mpa

И аналогично для видео:

AddType video/webm webm
AddType video/mp4 mp4
AddType video/ogg ogg
AddType video/ogg ogv

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

Если у вас сервер под Windows, то вам, возможно, надо добавить MIME-типы в IIS, либо с помощью IIS Manager, либо в файл web.config.

Конвертация файлов

Есть вероятность, что клиент послал вам файл, и вы определили MIME-тип этого файла исходя из расширения. Однако возможно, что файл был некорректно закодирован. Он может, например, быть совершенно валидным MP4, но по какой-то причине браузеры не могут его воспроизвести. Если такое случилось, то вам лучше самому его перекодировать с помощью таких инструментов, как Miro Video Converter или Media Converter, чтобы быть уверенным в корректности формата.

Кроме того, некоторые файлы, особенно MP4, не всегда воспроизводятся в браузере, который, предположительно, их поддерживает. Это происходит из-за того, что MP4 (так же известный как H.264) может быть закодирован разными «профилями». Если данный файл закодирован профилем, который не поддерживается браузером, то, естественно, ничего не будет работать. В этом случае попробуйте удостовериться, что файл закодирован согласно профилю Baseline, который поддерживается с большей вероятностью, чем более продвинутые. Исходя из моего опыта, использование инструментов типа Miro обеспечивает воспроизведение MP4-файлов в поддерживающих браузерах.

Если вам нужна поддержка Firefox 3.6 и ниже, вам также придется сконвертировать ваши аудио-файлы в Ogg и добавить их как дополнительный <source> в элемент <audio>.

MP4-файлы, которые не воспроизводятся, пока не загрузятся целиком

Обычно проигрыватели HTML5-аудио и -видео позволяют начать воспроизведение медиа-файла до того, как он полностью загрузится (если действительно есть, что воспроизводить!). Иногда этого не происходит с MP4-файлами, — тогда браузеры ждут полной загрузки файла, чтобы воспроизвести его. Это происходит из-за проблемы с кодированием.

Иногда MP4 закодированы с индексом файла (он содержит информацию о файле, например, его продолжительность), расположенным в конце файла, а не в начале. Этот индекс содержит метаданные, которые необходимы браузеру для прогрессивной загрузки. Если этот индекс расположен в конце, то браузер не знает о файле вообще ничего и поэтому должен ждать, пока не получит индекс.

Для устранения этой проблемы есть простой фикс под названием QTIndexSwapper, написанный Ренауном Эриксоном. Его нужно скачать и скормить ему файл; он переместит индекс в начало и сохранит файл.

Ставим атрибуты правильно

Правильная установка атрибутов может казаться тривиальной, но удивительно, сколько вопросов я видел на Stack Overflow, в которых люди удивляются, почему не работает та или иная функция, и при этом используют атрибуты, которых больше не существуют. Главный пример — атрибут autobuffer у элементов <audio> и <video>, который был заменен на preload еще в феврале 2010.

Люди, видимо, забывают, что HTML5 еще не завершен (хотя значительные части уже довольно стабильны), и всё, что вы читаете, может быть устаревшим. Стоит посматривать на спецификацию HTML5 и на When Can I Use? по поводу поддержки браузерами.

Управление громкостью в FF11+

Эта проблема возникла недавно. Некоторые из вас могли заметить, что управление громкостью исчезло из аудио-проигрывателя в Firefox 11+. Действительно, можно заглушить звук, и громкость по-прежнему управляется кнопками «вверх» и «вниз» на клавиатуре, но сам ползунок громкости был удален из-за двух багов. Я полагаю, в будущем он вернется, но сейчас, если вы удивляетесь, что с ним случилось — это не ваша вина. Конечно, можно сделать свой набор управляющих элементов, используя Media API.

Требуются плагины

Одно из конкурентных преимуществ HTML5-аудио и -видео — то, что им не требовались сторонние плагины (например, Flash), чтобы проигрывать мультимедийные файлы, если данный браузер поддерживает это.

К несчастью, это не является, строго говоря, правдой, так как Internet Explorer (9+) и Safari требуют установленных Microsoft Media Player и Apple QuickTime соответственно, чтобы они могли воспроизводить HTML5-аудио и -видео.

Видео и полноэкранный режим

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

Следующие браузеры дошли до некоторой поддержки полноэкранного API, хотя и в специфичных для производителя вариантах:

• Chrome 19+;
• Firefox 12+;
• Safari 5.1+;

Также есть JS-полифилл screenfull.js, который делает доступной эту функциональность в ограниченном числе браузеров.

Internet Explorer 9+ игнорирует постер

Если ваше HTML5-видео определено с использованием атрибута poster, вас может удивить что Internet Explorer 9 полностью игнорирует его, если только атрибут preload не установлено в none.

Так как Internet Explorer последним из всех стал поддерживать HTML5, мы все привыкли к тому, как другие браузеры обрабатывают атрибут poster: если он указан, то показывать это изображение до тех пор, пока пользователь не начнет воспроизводить видео. Internet Explorer 9 не делает этого. Он просто показывает изображение из атрибута poster, если ему больше нечего отображать; так что если первый кадр видео был загружен — это происходит, если атрибут preload установлен в auto (дефолтное значение) или в metadata — то IE9 использует этот первый кадр независимо от того, что указано в атрибуте poster.

Это, видимо, случай того, как Internet Explorer интерпретирует спецификации по-своему и делает что-то отличное от всех других браузеров. Internet Explorer 10 на данный момент так же показывает то же самое поведение.

Доступ к вебкамерам и микрофонам

Возможность доступа к периферийным устройствам всегда замышлялась авторами спецификации HTML5, когда они добавляли элемент <device>. Потом его убрали и заменили более исчерпывающим getUserMedia API, предоставляющее доступ к медийным устройствам.

Это API само по себе просто в использовании, но поддержка в браузерах пока что довольно ограничена. На данный момент Opera является единственным браузером с реализацией (поддерживает только видео), но уже можно посмотреть на что это API способно. Internet Explorer 10 скоро пополнит набор, и вскоре появится поддержка в Firefox Nightly.

Итоги

Этим завершается моя подборка проблем, с которыми можно столкнуться при работе с HTML5-аудио и -видео. Конечно, она не покрывает всё, и я уверен, что существуют не упомянутые здесь проблемы, на которые вы можете натолкнуться. Если такое случится, то, пожалуйста, укажите их в здесь комментариях, — с решением, если возможно; если решения у вас нет, то я или кто-то другой из докторов HTML5 попробуем помочь.

Оригинал статьи и автор.