Создание приложений HTML5

  • Статья

HTML5-теги audio и video в различных браузерах на практике

Джон Дайер

Исходный код можно скачать по ссылке

Продукты и технологии:

HTML5-теги audio и video, JavaScript, MediaElement.js

В статье рассматриваются:

• простое воспроизведение в HTML5 и атрибут controls;

• медиа-атрибуты в HTML5;

• проблемы с HTML5 Media;

• JavaScript-библиотеки для видео и аудио в HTML5.

Когда впервые были введены HTML5-теги audio и video, несовместимости с кодеками и браузерами сделали их трудными в использовании, и развертывать их на крупных веб-сайтах было непрактично. Эти теги были хороши для компаний, которые пишут экспериментальный код или ведут кросс-браузерные медиа-разработки, но для универсального использования HTML5 Media API был слишком ненадежен.

Сегодня многое изменилось. Браузеры и библиотеки JavaScript вышли на такой уровень, когда вы можете (и должны) использовать HTML5 Media как вариант по умолчанию для любых проектов, где будет показываться аудио- и видеоконтент. Даже перенастройка существующего видеоконтента Flash и Silverlight для воспроизведения в HTML5 стала делом сравнительно простым. В этой статье мы рассмотрим преимущества использования HTML5 для воспроизведения медийной информации, изучим некоторые примеры кода, обсудим ряд основных проблем, с которыми сталкиваются разработчики, и поговорим о способах решения этих проблем.

Преимущества HTML5 Media

Преимущество использования HTML5 для воспроизведения медийной информации заключается в том, что вы можете использовать свои навыки в работе с HTML, CSS и JavaScript вместо изучения Flash или Silverlight. Если вы умеете создавать кнопки в HTML и управлять ими с помощью JavaScript, значит, вы знаете все, что нужно для разработки под HTML5 Media. В HTML5 Media встроена поддержка надписей и субтитров с применением нового элемента track; также рассматриваются дополнительные функции, например поддержка прямого побайтового доступа для манипуляций с видео.

Более того, воспроизведение медийной информации через HTML5-теги video и audio осуществляется эффективнее, чем через такие плагины, как Flash или Silverlight, что дает более плавное проигрывание и продлевает время работы от аккумуляторов. В дополнение к этому мобильные устройства под управлением Windows Phone 7.5, Apple iOS и Android (а также браузер в стиле Metro в Windows 8) поддерживают воспроизведение медийной информации только через HTML5-теги video и audio. Некоторые устройства Android включают Flash, но Adobe недавно отказалась от дальнейшей работы над своей мобильной версией Flash, а значит, в будущем HTML5 станет единственным способом воспроизведения медийной информации на мобильных устройствах.

Простое воспроизведение в HTML5 и атрибут controls

Во времена использования Flash или Silverlight для воспроизведения видео простейшая разметка, позволяющая выполнять эту задачу (в данном случае — проигрывать видео в формате mp4), выглядела бы примерно так:

<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
  <param name="src" value="player.swf?file=video.mp4">
  <embed src="player.swf?file=video.mp4" width="640"
    height="360"></embed>
</object>

Сравните эти вложенные теги object, param и embed со следующим HTML5-тегом video, используемым для воспроизведения того же видео в кодировке h.264:

<video src="video.mp4" controls></video>

Этот вариант гораздо проще — только чистый HTML, который практически не нуждается в пояснениях. Когда браузер скачивает достаточный объем видеоролика, чтобы определить исходную высоту и ширину кадров, он соответствующим образом изменяет размеры видео. Но, как и в случае с тегами img, всегда лучше указывать атрибуты height и width, чтобы не возникало необходимости в перезагрузке страницы. Кроме того, вы можете использовать атрибут style, чтобы указать px или значения ширины и высоты в процентах (в последующих примерах я буду использовать оба варианта).

Один из добавленных мной атрибутов — controls. Он сообщает браузеру отображать свою встроенную панель управления воспроизведением, которая обычно включает переключатель старт/пауза, индикатор прогресса и элементы управления громкостью. Controls — это булев атрибут, т. е. ему не нужно присваивать значение. В синтаксисе, более близком к XHTML, вы могли бы написать controls="controls", но браузер всегда считает controls равным false, если он отсутствует, и true, если он присутствует или если ему присвоено какое-то значение.

Медиа-атрибуты HTML5 и дочерние теги source

Для элементов audio и video введено несколько новых атрибутов, определяющих то, как браузер будет представлять медиаконтент конечному пользователю:

  • src указывает один медийный файл для проигрывания (о нескольких источниках с разными кодеками, пожалуйста, см. ниже);
  • poster — URL изображения, которое будет показываться до нажатия пользователем кнопки Play (только для video);
  • preload определяет, как и когда браузер загрузит медийный файл. Возможны три значения: none (видео не скачивается, пока пользователь не запускает проигрывание), metadata (сообщает браузеру скачивать ровно столько данных, чтобы можно было определить высоту и ширину кадров, а также длительность медиа-ролика) и auto (позволяет браузеру самому решать, какой объем видео нужно скачивать до запуска проигрывания пользователем); 
  • autoplay — булев атрибут, используемый для запуска видеоролика сразу после загрузки страницы (мобильные устройства часто игнорируют этот атрибут для экономии пропускной полосы);
  • loop — булев атрибут, вызывающий повторное воспроизведение видео по достижении конца записи;
  • muted — булев атрибут, указывающий, нужно ли запускать видео с выключенным звуком;
  • controls — булев атрибут, указывающий, должен ли браузер выводит свои элементы управления;
  • width и height задают воспроизведение видеоролика с определенным размером (только для video, значения не могут быть в процентах).

Отображение текстовых элементов в течение определенного времени

В браузерах также начинают реализовывать элемент track, который поддерживает в видеороликах субтитры, скрытые титры (closed captions), переводы (translations) и комментарии. Вот элемент video с дочерним элементом track::

<video id="video1" width="640" height="360" preload="none" controls>
  <track src="subtitles.vtt" srclang="en" kind="subtitles" label="English subtitles">
</video>

В этом примере я задействовал четыре из пяти возможных атрибутов элемента track:

  • src — ссылка на файл либо в формате Web Video Timed Text (WebVTT), либо в формате Timed Text Markup Language (TTML);
  • srclang — язык TTML-файла (например, en, es или ar);
  • kind указывает тип текстового контента: субтитры, заголовки, описания, главы или метаданные;
  • label хранит текст, отображаемый пользователю, который выбирает трек;
  • default — булев атрибут, определяющий стартовый элемент track.

WebVTT — это простой текстовый формат, который начинается с однострочного объявления (WEBVTT FILE), а затем перечисляет время начала и конца; в качестве разделителя используются символы -->, а за временем начала и конца указывается текст, отображаемый в этот интервал времени. Вот простой WebVTT-файл, который отображает две строки текста в два разных интервала времени:

WEBVTT FILE

00:00:02.5 --> 00:00:05.1
This is the first line of text to display.

00:00:09.1 --> 00:00:12.7
This line will appear later in the video.

На момент написания этой статьи элемент track поддерживался только в Internet Explorer 10 Platform Preview и Chrome 19, а в остальных браузерах эта поддержка должна появиться очень скоро. Некоторые библиотеки JavaScript, о которых я расскажу позже, добавляют поддержку элемента track в браузеры, пока не имеющие соответствующей реализации, но есть еще и отдельная библиотека поддержки track — captionator.js (captionatorjs.com), которая разбирает теги track, читает файлы форматов WebVTT и TTML (а также SRT и YouTube SBV) и предоставляет UI для браузеров, где пока нет собственной поддержки.

Скриптовое управление HTML5 Media

Ранее я использовал атрибут controls, чтобы браузер выводил свои элементы управления поверх тегов video или audio. Проблема в том, что у каждого браузера свой набор элементов управления, которые вряд ли совпадут с дизайном вашего веб-сайта. Для большей согласованности вы можете удалить элементы управления браузера, а затем добавить на страницу собственные кнопки, управляемые кодом на JavaScript. Вы также можете добавить слушатели событий (event listeners), чтобы отслеживать состояние процесса воспроизведения видео или аудио. В следующем примере я убрал атрибут controls и добавил разметку ниже video, которая используется в качестве базовой панели элементов управления:

<video id="video1" style="width:640px; height:360px" src="video.mp4"> </video> 
<div>
  <input type="button" id="video1-play" value="Play" />
  <input type="button" id="video1-mute" value="Mute" />
  <span id="video1-current">00:00</span>
  <span id="video1-duration">00:00</span>
</div>

Простой код на JavaScript (рис. 1) будет управлять воспроизведением видео и показывать текущее время в видеоролике, а также создаст полноценный плеер, показанный на рис. 2 (Internet Explorer 9). (Заметьте, что в HTML5 в теге script атрибут type="text/javascript" не обязателен.)

Рис. 1. Управление воспроизведением видео

<script>
// Обертываем код в функцию для защиты пространства имен
(function() {
// Find the DOM objects
var  video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
duration = document.getElementById("video1-duration");

// Переключаем состояние "старт/пауза"
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
    video.play();
    playBtn.value = "Pause";
  } else {
    video.pause();
    playBtn.value = "Play";
  }
}, false);

// Переключаем состояние "звук включен/выключен"
muteBtn.addEventListener("click", function() {
  if (video.muted) {
    video.muted = false;
    muteBtn.value = "Mute";
  } else {
    video.muted = true;
    muteBtn.value = "Unmute";
  }
}, false);

// Показываем длительность, когда это становится возможным
video.addEventListener("loadedmetadata", function() {
  duration.innerHTML = formatTime(video.duration);
}, false);

// Обновляем текущее время
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(video.currentTime);
}, false);

function formatTime(time) {
  var 
    minutes = Math.floor(time / 60) % 60,
    seconds = Math.floor(time % 60);

  return   (minutes < 10 ? '0' + minutes : minutes) + ':' +
           (seconds < 10 ? '0' + seconds : seconds);
}

})();

A Working Video Player That Shows the Time
Рис. 2. Рабочий видеоплеер, показывающий время

Код на рис. 1 вводит методы play и pause, события timeupdate и loadedmetadata, а также свойства paused, ended, currentTime и duration. Полный HTML5 Media API (w3.org/TR/html5/video.html) включает гораздо больше средств, чем нужно для создания полнофункционального медиаплеера. Помимо атрибутов медийных тегов, перечисленных ранее, медиа-объекты HTML5 имеют другие свойства, доступные только через JavaScript:

  • currentSrc описывает медийный файл, который в данный момент воспроизводится браузером, если используются теги-источники;
  • videoHeight и videoWidth iзадают исходные размеры видеокадра;
  • volume указывает значение в диапазоне от 0 до 1, определяющее уровень громкости (мобильные устройства игнорируют это свойство; в них используются аппаратные регуляторы громкости);
  • currentTime задает текущую позицию воспроизведения в секундах;
  • duration— общее время длительности медийного файла в секундах;
  • buffered — массив, указывающий, какие части медийного файла были скачаны;
  • playbackRate — скорость воспроизведения видео (по умолчанию — 1). Измените это значение для ускорения (1.5) или замедления (0.5) воспроизведения;
  • ended указывает, достигнут ли конец видео;
  • paused всегда равен true при запуске, а затем — false (как только начинается воспроизведение видео);
  • seeking указывает, что браузер пытается скачать следующую порцию и переходит в новую позицию.

Медиа-объекты HTML5 также включают следующие методы, применяемые при написании скриптов:

  • play пытается загрузить и воспроизвести видео;
  • pause останавливает проигрывание текущего видеоролика;
  • canPlayType(type) ) распознает, какие кодеки поддерживает браузер. Если вы посылаете некий тип вроде video/mp4, браузер ответит строкой probably, maybe, no или пустой строкой;
  • load iвызывается для загрузки нового видео, если вы изменяете атрибут src.

В спецификации HTML5 Media определено 21 событие; вот некоторые из наиболее часто используемых:

  • loadedmetadata срабатывает, когда становятся известны длительность и размеры;
  • loadeddata срабатывает, когда браузер может начать воспроизведение с текущей позиции;
  • play запускает видео, когда оно больше не находится в состоянии paused или ended;.
  • playing срабатывает, когда воспроизведение началось после паузы, буферизации или поиска;
  • pause останавливает проигрывание видео;
  • ended срабатывает, когда достигается конец видео;
  • progress указывает, что была загружена очередная порция медийного файла;
  • seeking равно true, когда браузер начал поиск;
  • seeked равно false, когда браузер закончил поиск;
  • timeupdate срабатывает, когда воспроизводится медиа-ресурс;
  • volumechange срабатывает, когда изменилось свойство muted или volume.

Эти свойства, методы и события являются мощными средствами для создания пользователям богатой мультимедийной среды, полностью управляемой HTML, CSS и JavaScript. В базовом примере на рис. 1 я сначала создаю переменные для всех элементов страницы:

// Find the DOM objects
var video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
  duration = document.getElementById("video1-duration");

Затем я добавляю событие click к своим кнопкам для управления воспроизведением медиа-данных. Здесь я переключаю состояние «старт/пауза» для видео и изменяю надпись на кнопке:

// Toggle the play/pause state
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
      video.play();
      playBtn.value = "Pause";
  } else {
      video.pause();
      playBtn.value = "Play";
  }
}, false);

Наконец, я добавляю события к объекту media для отслеживания его текущего состояния. Я слушаю событие timeupdate и обновляю панель элементов управления значением текущего времени из playhead, форматируя секунды в стиле «минуты:секунды»:

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(media.currentTime);
}, false);

Проблемы с HTML5 Media

К сожалению, заставить HTML5 Media согласованно работать во всех браузерах и на всех устройствах не так-то просто, как в моем примере. Я уже упоминал, что не все браузеры поддерживают элемент track, а теперь рассмотрю еще три проблемы, с которыми вы столкнетесь при использовании тегов audio и video, и покажу решения, позволяющие преодолеть эти проблемы. В конце статьи я расскажу о некоторых библиотеках JavaScript, которые обертывают все эти решения в легко развертываемые пакеты.

Поддержка аудио- и видеокодеков HTML5 Первая проблема, с которой вы столкнетесь при разработке с применением HTML5 Media, — несогласованная поддержка аудио- и видеокодеков. Мои примеры работают в Internet Explorer 9 и выше, Chrome и Safari, но не будут работать в Firefox или Opera, потому что, несмотря на поддержку этими браузерами HTML5-тега video, они не поддерживают кодек h.264. Из-за вопросов с правами на интеллектуальную собственность поставщики браузеров разделились на два лагеря в отношении кодеков, и это приводит нас к табл. 1, где показано, какие кодеки работают с теми или иными браузерами.

Табл. 1. Поддержка видеокодеков в различных браузерах

Видео IE8
MP4 (h.264/AAC) Нет
WebM (VP8/Vorbis) Нет

 

Internet Explorer 9+, Safari, Chrome и мобильные устройства (iPhone, iPad, Android 2.1+ и Windows Phone 7.5+) — все они поддерживают видеокодек h.264, который обычно помещается в контейнер MP4. Firefox и Opera, напротив, поддерживают видеокодек VP8, который помещается в контейнер WebM. Chrome также поддерживает WebM, и поставщик этого браузера на каком-то этапе готов отказаться от поддержки h.264. Internet Explorer 9+ может визуализировать WebM, если пользователь сам установит нужный кодек. Наконец, Firefox, Opera и Chrome также поддерживают кодек Theora, помещаемый в контейнер Ogg, но поставщики этих браузеров постепенно сокращают его поддержку, отдавая предпочтение WebM (если только вам не требуется поддерживать Firefox 3.x), поэтому простоты ради я выкинул его из таблицы и примеров.

Что касается аудио, поставщики браузеров и здесь разделились на два лагеря, при этом первая группа (Internet Explorer 9, Chrome и Safari) поддерживает привычный формат MP3, а вторая (Firefox и Opera) — Vorbis в контейнере Ogg. Многие браузеры также умеют проигрывать WAV-файлы. См. табл. 2.

Табл. 2. Поддержка аудиокодеков в различных браузерах

Аудио IE8 IE9+ Chrome Safari Мобильные Firefox Opera
MP3 Нет Да Да Да Да Нет Нет
Ogg Theora Нет Отдельная установка Да Нет Нет Да Да
WAV Нет Нет Возможно Да Да Да Да

 

Чтобы вы могли справиться с этими различиями, теги video и audio поддерживают несколько дочерних тегов source, позволяющих браузеру выбирать тот медийный файл, который они способны воспроизвести. Каждый элемент source имеет два атрибута:

  • src указывает URL медийного файла;
  • type задает mimetype и дополнительно конкретный видеокодек.

Чтобы предложить выбор из видеокодеков h.264 и VP8, вы могли бы использовать такую разметку:

<video id="video1" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Заметьте, что для более ранних сборок iOS и Android нужно первым указывать MP4-файл.

Эта разметка будет работать во всех современных браузерах. Код на JavaScript будет управлять тем, какой видеокодек выберет браузер. Для тега audio разметка выглядит примерно так:

<audio id="audio1">
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.oga" type="audio/oga">
</audio>

Если вы размещаете аудио- и видеоконтент на своем сервере, то у всех ваших медийных файлов должен быть корректный MIME-тип, а иначе многие браузеры, готовые к работе с HTML5 (например, Internet Explorer и Firefox), не будут воспроизводить медиа-данные. Чтобы добавить MIME-типы в IIS 7, откройте Features View, дважды щелкните MIME Types, выберите кнопку Add в секции Actions, добавьте расширение (mp4) и MIME-тип (video/mp4), а затем нажмите OK. Потом проделайте то же самое для остальных типов (webm и video/webm), которые вы планируете использовать.

Поддержка более старых браузеров Включение двух медийных файлов (таких как MP4 и WebM для видео) заставит HTML5 Media работать во всех современных браузерах. Но, когда устаревшие браузеры вроде Internet Explorer 8 встречают тег video, они не могут отображать видео. Однако они будут выполнять рендеринг HTML, помещенного между открывающим тегом <video> и закрывающим тегом </video>. В следующем примере в этом случае пользователю выводится сообщение с просьбой перейти на более новый браузер:

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Please update your browser</p>
</video>

Чтобы пользователи браузеров, не готовых к работе с HTML5, могли проигрывать видео, вы можете предоставить альтернативу в виде встроенного Flash, который воспроизводит тот же MP4, который вы предлагаете пользователям Internet Explorer 9, Safari и Chrome, как показано на рис. 3.

Рис. 3. Воспроизведение видео с помощью Flash

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <object width="640" height="360" classid="clsid:
    d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
      "http://fpdownload.macromedia.com/pub/
      shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
        <param name="SRC" value="player.swf?file=video.mp4">
        <embed src="player.swf?file=video.mp4" width="640"
          height="360"></embed> 
        <p>Please update your browser or install Flash</p>
  </object>
</video>

Эта разметка позволяет всем браузерам проигрывать видеоролики. Браузеры, не поддерживающие ни HTML5, ни Flash, будут выводить сообщение, предлагающее пользователю перейти на новую версию. Подробнее о том, как и почему работает эта вложенная разметка, см. статью Крока Кеймена (Kroc Camen) «Video for Everybody» (camendesign.com/code/video_for_everybody).

Однако у этого подхода есть свои недостатки. Во-первых, нужно поддерживать много разметки. Во-вторых, вы должны кодировать и хранить минимум два медийных файла. И в-третьих, любые элементы управления HTML/JavaScript, добавляемые вами на страницу, не будут работать со встраиваемым проигрывателем Flash. Позже я предложу несколько библиотек JavaScript, которые могут помочь преодолеть эти трудности, но сначала обсудим последнюю проблему.

Поддержка полноэкранного воспроизведения Flash и Silverlight поддерживают полноэкранный режим просмотра видео и другого контента. Вы можете реализовать эту функцию, создав простую кнопку и связав ее с командой переключения в полноэкранный режим на ActionScript (для Flash) или C# (для Silverlight).

В современных браузерах есть похожий полноэкранный режим, в который можно перейти командой меню или нажатием какой-либо клавиши (чаще всего F11 или Ctrl+F). Но до недавних пор JavaScript API не позволял разработчикам инициировать переключение в этот режим при нажатии кнопки на странице. Это означало, что HTML5-видео можно было смотреть только в полном окне браузера, но не на всем экране.

В конце 2011 года в Safari, Chrome и Firefox добавили поддержку предложенного W3C интерфейса FullScreen API, который обеспечивает функциональность, похожую на имеющуюся в Flash и Silverlight. Группа разработчиков Opera в настоящее время занимается реализацией этого интерфейса, но группа разработчиков Internet Explorer на момент написания этой статьи пока не решила, будет ли она реализовать этот API. Браузер в стиле Metro в Windows 8 будет полноэкранным по умолчанию, однако пользователям настольного Internet Explorer потребуется вручную переключаться в полноэкранный режим через команду меню или с помощью клавиши F11.

Для перехода в полноэкранный режим в браузерах с его поддержкой вы вызываете метод requestFullscreen применительно к элементу, который нужно показать на полном экране. Команда выхода из полноэкранного режима вызывается из объекта document — это метод document.exitFullscreen. W3C-предложение все еще прорабатывается, поэтому я не стану здесь углубляться в детали, но я отслеживаю состояние этого API в своем блоге bit.ly/zlgxUA. 

Библиотеки JavaScript для видео и аудио в HTML5

Ряд разработчиков создал библиотеки JavaScript, которые упрощают работу с видео и аудио в HTML5 за счет интеграции всего релевантного кода в единый пакет. Вот некоторые из лучших библиотек с открытым исходным кодом: MediaElement.js, jPlayer, VideoJS, Projekktor, Playr и LeanBack. Полный список со сравнением возможностей вы найдете по ссылке praegnanz.de/html5video.

Вам нужно лишь предоставить тег video или audio, а библиотека автоматически создаст набор настраиваемых элементов управления, а также вставит проигрыватель Flash для браузеров, не поддерживающих HTML5 Media. Единственная проблема в том, что проигрыватели Flash, вставляемые многими библиотеками, не всегда выглядят или функционируют аналогично проигрывателю HTML5. Это значит, что любое HTML5-событие, добавленное вами, не будет работать с проигрывателем Flash и любая используемая вами собственная CSS не будет видна.

На моей работе меня попросили создать видеоплеер HTML5 с синхронизированными слайдами и текстом (transcripts) (см. демонстрацию по ссылке online.dts.edu/player). У нас была библиотека более чем с 3000 видеофайлов в формате h.264, и перекодировать их в WebM для Firefox и Opera было просто нереально. Нам также нужна была поддержка более старых браузеров, таких как Internet Explorer 8, но переключение на отдельный проигрыватель Flash в данном случае не годилось, так как он не реагировал бы на события для слайдов и текста.

Чтобы преодолеть эти трудности, я создал один из плееров, упомянутых ранее под общим названием MediaElement.js (mediaelementjs.com). Этот библиотека JavaScript с открытым исходным кодом (MIT/GLPv2), которая включает специальные версии проигрывателей Flash и Silverlight, имитирующих HTML5 API. Вместо совершенно автономного проигрывателя Flash в MediaElement.js используется Flash только для рендеринга видео, а затем видео обертывается в JavaScript-объект, который выглядит как HTML5 API. В конечном счете это позволяет обновить все браузеры так, чтобы они могли использовать тег video и дополнительные кодеки, изначально не поддерживаемые ими. Для запуска проигрывателя применительно к одному файлу в формате h.264 с использованием jQuery вам потребуется добавить лишь следующий код:

<video id="video1" width="640" height="360" src="video.mp4" controls></video>
<script>
jQuery(document).ready(function() {
  $("video1").mediaelementplayer();
});
</script>

Для браузеров, не поддерживающих тег video (например, Internet Explorer 8) или кодек h.264 (Firefox и Opera), MediaElement.js вставит компенсационную прослойку Flash (или Silverlight — в зависимости от того, что установил пользователь), чтобы «обновить» такие браузеры для поддержки свойств и событий HTML5 Media, о которых я рассказывал.

Для поддержки аудио можно использовать единый MP3-файл:

<audio id="audio1" src="audio.mp3" controls></audio>

В качестве альтернативы вы могли бы включить единый файл Ogg/Vorbis:

<audio id="audio1" src="audio.oga" controls></audio>

И вновь для браузеров, не поддерживающих тег audio (Internet Explorer 8) или кодек Ogg/Vorbis (Internet Explorer 9+ и Safari), MediaElement.js вставит компенсационную прослойку, чтобы все эти браузеры функционировали так, будто они изначально поддерживают этот кодек. (Заметьте, что Ogg/Vorbis не будет воспроизводиться на мобильных устройствах.)

MediaElement.js также включает поддержку элемента track и встроенного полноэкранного режима для браузеров, реализующих JavaScript API. Вы можете добавить собственные HTML5-события или свойства для отслеживания, и они будут работать в любом браузере и на любом мобильном устройстве.

Надеюсь, я показал вам, что, несмотря на некоторые проблемы, HTML5-элементы video и audio, особенно в сочетании с предложенными мной великолепными библиотеками, достаточно легко добавить в существующие веб-сайты и они должны быть средствами по умолчанию в любых новых проектах.

Джон Дайер (John Dyer)— директор по веб-разработкам в Dallas Theological Seminary (dts.edu). Ведет блог j.hn.

Выражаю благодарность за рецензирование статьи экспертам: Джону Хрватину (John Hrvatin) и Брэндону Сэтрому (Brandon Satrom).