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

Когда впервые были введены 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" не обязателен.)

<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);
}

})();

Код на рис. 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, где показано, какие кодеки работают с теми или иными браузерами.

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.

Чтобы вы могли справиться с этими различиями, теги 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.

<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, особенно в сочетании с предложенными мной великолепными библиотеками, достаточно легко добавить в существующие веб-сайты и они должны быть средствами по умолчанию в любых новых проектах.