Одним из наиболее заметных элементов новой спецификации HTML5 является возможность естественного управления воспроизведением видео. Простой тег <video> — это «все, что нужно» для мгновенной поддержки видео во многих современных браузерах — или это так? Не все версии браузера могут обрабатывать эту функцию HTML5; по состоянию на январь 2012 года элемент <video> частично или полностью поддерживается примерно двумя третями браузеров по всему миру. Ниже приведены некоторые варианты проверки того, что элемент <video> работает хорошо как для современных, так и для не очень современных браузеров.
Но ждать! Зачем вам вообще беспокоиться об использовании <video>, когда вы можете просто загрузить видео на YouTube и вставить видео? В конце концов, YouTube имеет мобильную поддержку и делает кодирование простым процессом. Несмотря на распространенное мнение, что YouTube — это все, что вам нужно, у него есть некоторые заметные недостатки. Например, в конце вашего видео на YouTube будет показана серия других рекомендуемых видео, которые могут отвлечь пользователей от вашего сайта. YouTube также добавляет небольшой водяной знак к каждому видео, что не всегда приемлемо. Если ваши видео содержат конфиденциальную, защищенную авторским правом информацию «только для членов» или «только для сотрудников», то, скорее всего, единственный вариант — это хостинг. Есть много случаев, когда YouTube не является приемлемым вариантом. Если вы попадаете в одно из таких затруднений, вот как спроектировать надежное автономное воспроизведение видео на вашем сайте.
Основы тегов <video>
Элемент <video> работает в последних версиях всех основных браузеров (IE9 +, Firefox 7+, Chrome 14+, Safari 4+ и Opera 11+). Типичная реализация <video> выглядит следующим образом:
<video controls poster="linktoposter.jpg" width="640" height="360" controls="controls">
<source src="linktovideo.mp4" type="video/mp4" />
<source src="linktovideo.webm" type="video/webm" />
<source src="linktovideo.ogv" type="video/ogg" />
<p>Fallback text.</p>
</video>Обратите внимание, как вы ссылаетесь на несколько версий видео. Это потому, что не все браузеры поддерживают воспроизведение MP4. Те, которые не будут переходить к формату WEBM. Если браузер не поддерживает MP4 или WEBM, он по умолчанию будет в формате OGV. Между этими тремя форматами у вас должна быть совместимость практически со всеми распространенными браузерами.
Давайте подробнее рассмотрим атрибуты <video>, использованные выше:
- плакат — ссылка на изображение, которое будет отображаться во время загрузки видео или до того, как посетитель нажмет кнопку воспроизведения
- Controls — сообщает, может ли посетитель видеть элементы управления воспроизведением видео.
- источник — ссылка на местоположение видеофайла
- тип источника — формат видео указанного файла
- резервный текст — текст в тегах <p> будет отображаться, если браузер не может воспроизвести ни один из трех форматов видео
Помните о следующих исправлениях, если у вас возникли проблемы с внедрением <video> на вашем веб-сайте:
- Версия видео MP4 должна быть указана первой из-за ошибки в iPad.
- Если видео не будет воспроизводиться в обычном, обновленном браузере, вам может потребоваться добавить соответствующие типы MIME в ваш файл .htaccess:
- Добавить тип видео / ogg — ogv
- Добавить тип видео / mp4 — mp4, m4v
- Добавить тип видео / webm — webm
Преобразование видео
Перспектива преобразования вашего видео в файлы разных типов может показаться утомительной, но это легко сделать. Miro Video Converter — это бесплатный ресурс для преобразования видеофайлов в несколько форматов, который позволяет преобразовывать видеофайлы в различные форматы, сохраняя при этом исходные размеры. Доступны и другие инструменты, но для автономного и простого процесса Miro Video Converter — это то, что нужно.
Обратная совместимость
Для того, чтобы старые браузеры могли просматривать ваши видео, вы должны использовать запасной вариант Adobe Flash. Поскольку эта проблема совместимости со старыми браузерами является распространенной, в Интернете есть несколько библиотек и сценариев, которые могут сделать для вас большую работу. Мы рассмотрим два из них:
- MediaElement.js — инструментарий, который дает вам возможность включить только один файл .MP4, а также свободу использовать «несколько кодеков с резервной версией Flash». Существуют плагины для Drupal и WordPress (среди прочих), которые делают это отличный вариант. Имейте в виду, что этот параметр зависит от javascript, и вам будет предоставлено множество вариантов (что хорошо), в зависимости от того, что вы можете сделать с игроком. Нажмите здесь, чтобы проверить MediaElement.js .
- Видео для всех — это решение без поддержки JavaScript, которое обеспечивает очень простой способ обеспечения совместимости со старыми браузерами. Там нет ничего, чтобы загрузить или установить; единственный вызов, который вам нужно будет сделать, — это Flash-контейнер. Есть несколько из них: FlashFox, Flow Player и JW Player. Нажмите здесь, чтобы проверить видео для всех .
Пример кода:
Из двух методов Video for Everyone требуется наименьшая настройка, поэтому вот код:
<video controls="controls" poster="linktoposter.jpg" width="640" height="360">
<source src="linktomovie.mp4" type="video/mp4" />
<source src="linktomovie.webm" type="video/webm" />
<source src="linktomovie.ogv" type="video/ogg" />
<!-- Fallback object using Flow Player -->
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[ 'linktoposter.jpg',{'url':'linktomovie.mp4','autoPlay':false}]}" />
<img alt="My Movie" src="linktoposter.jpg" width="640" height="360" title="No video playback capabilities, please download the video below." />
</object>
<!-- Fallback Text -->
Your browser does not appear to support a browser. Please download the video below.
</video>
<p>
<strong>Download video:</strong> <a href="linktomovie.mp4">MP4 format</a> | <a href=" linktomovie.ogv">Ogg format</a> | <a href=" linktomovie.webm">WebM format</a>
</p>
Прелесть «Видео для всех» состоит в том, что для работы требуется только один файл .MP4. Но все же хорошая идея иметь форматы WEBM и OGV, так как они поддерживаются многими браузерами.
Совместимость браузера
Если вам интересно, какие современные браузеры поддерживают какие форматы, вот простая разбивка.
| браузер | MP4 | ОГВ | WEBM |
| IE9 | да | Ручная установка | Manuall Install |
| Firefox (10) | нет | да | да |
| Хром (17) | нет | да | да |
| Android | да | да | да |
| Safari (5.1.3) | да | Ручная установка | Ручная установка |
| Опера (11,61) | Ручная установка | да | да |
В сумме…
Итак, если у вас есть все три формата файлов — MP4, WEBM и OGV — у вас должна быть охвачена большая часть ваших баз, за исключением очень старых браузеров и малоизвестных браузеров. Вот где в игру вступает запасной вариант Flash. Использование одного из нескольких откатных приемов Flash вместе с HTML5 представляет собой надежное сочетание передовых методов и приспособлений для старых браузеров.