Единая разметка: использование <canvas>, <audio> и <video>

На этом блоге мы неоднократно обсуждали использование "единой разметки" в Internet Explorer 9. Неотъемлемой частью воплощения "единой разметки" в жизнь является поддержка в IE9 функций, необходимых для обеспечения единообразной с другими браузерами работы HTML, JavaScript и CSS. В число изменений, которые вносятся в IE9 для поддержки "единой разметки", входит поддержка HTML5-элементов <canvas>, <audio> и <video>. Они появились в третьей предварительной версии Platform Preview и продолжают улучшаться с каждым обновлением.

В первой статье, посвященной "единой разметке", я описывал работу над ней как "дорогу с множеством направлений". Каждый браузер играет свою роль, обеспечивая поддержку нужных функций и их правильное поведение. Веб-разработчики ответственны за то, как они учитывают в своем коде продолжающие, к сожалению, существовать кроссбраузерные различия. Самое важное для веб-разработчиков при работе с браузерами - использовать обнаружение функций, а не браузеров. В этой статье я вкратце опишу, как использовать обнаружение функций для элементов <canvas>, <audio> и <video>.


Обнаружение при помощи HTML-разметки
В отличие от остальных элементов, поддержка элементов <canvas>, <audio> и <video> может быть обнаружена непосредственно при помощи HTML-разметки. Для этого необходимо использовать элемент, а затем поместить внутрь него резервное содержимое для браузеров, которые данный элемент не поддерживают. Браузеры с поддержкой данного элемента скроют резервное содержимое от пользователя и отобразят только сами элементы <canvas>, <audio> или <video>.

<!-- Пример 1: Простейшее резервное действие <canvas> -->

<canvas>

	Этот текст отображается только в браузерах, не поддерживающих элемент canvas.

</canvas>

браузерах, не поддерживающих элемент canvas.
</canvas>[/code]
[code]<!-- Пример 2: Простейшее резервное действие <audio> -->
<audio>
Этот текст отображается только в браузерах, не поддерживающих элемент audio.
</audio>[/code]
[code]<!-- Пример 3: Простейшее резервное действие <video> -->
<video>
Этот текст отображается только в браузерах, не поддерживающих элемент video.
</video>[/code]
Но следует помнить, что резервное содержимое скрывается лишь визуально. Блоки <script> и остальные элементы в резервном содержимом будут исполняться всегда, даже если браузер поддерживает элементы <canvas>, <audio> и <video>.

[code]<!—Пример 4: <script> в резервном содержимом исполняется всегда -->
<canvas>
<script>
alert("Этот код исполняется всегда, даже при наличии поддержки canvas.");
</script>
</canvas>[/code]
Конечно, резервное содержимое в то же время должны быть и полезным. Что именно считать полезным различается в зависимости от ваших целей. Один из подходов заключается в том, чтобы указать пользователю, где он может загрузить обновление, но в большинстве случаев для обеспечения качественной работы пользователя лучше переключиться на альтернативные методы предоставления содержимого. Например, если вы используете прорисовку изображения, не слишком зависящего от canvas, вы можете вернуться к изображению, выводимому серверной стороной. Также в качестве альтернативы вы можете задействовать среду, реализующую canvas поверх существующих веб-технологий, или использовать широко распространенную надстройку.

Для элементов <audio> и <video> существует больше вариантов реализации обратной совместимости посредством надстроек, будь то медиа-проигрыватель или приложение, построенное на широко распространенных технологиях, таких как Flash или Silverlight. В самом крайнем случае вы можете предоставить пользователю ссылку на загрузку файла, чтобы он мог воспроизвести его локально. Примеры, приведенные ниже, в общих чертах иллюстрируют этот тип резервного действия, хотя тег <object> требует, как правило, ряд различающихcz в зависимости от выбранной надстройки параметров.

[code]<!-- Пример 5: Полезное резервное содержимое для <audio> -->
<audio src="myaudio">
<object type="audio-plugin-mime-type" data="myaudio">
<a href="myaudio">Загрузить аудиофайл</a>
</object>
</audio>[/code]
[code]<!-- Пример 6: Полезное резервное содержимое для <video> -->
<video src="myvideo">
<object type="video-plugin-mime-type" data="myvideo">
<a href="myvideo">Загрузить видеофайл</a>
</object>
</video>[/code]

Обнаружение поддержки при помощи скрипта
Помимо HTML-разметки, поддержка элементов <canvas>, <audio> и <video> может быть обнаружена при помощи скрипта. Такое обнаружение может быть выполнено множеством различных способов, но простейшим из них является проверка на наличие соответствующего объекта интерфейса в window.

[code]// Example 7: Простейшее обнаружение функции <canvas>
if(window.HTMLCanvasElement) {
// Код, требующий поддержки canvas
}[/code]
[code]// Example 8: Простейшее обнаружение функции <audio>
if(window.HTMLAudioElement) {
// Код, требующий поддержки audio
}[/code]
[code]// Example 9: Простейшее обнаружение функции <video>
if(window.HTMLVideoElement) {
// Код, требующий поддержки video
}[/code]
Другой способ обнаружения <audio> и <video> заключается в проверке на наличие метода canPlayType на динамически созданном элементе <audio> или <video>. Такой подход используется в некоторых рабочих средах и является предпочтительным, если вы намереваетесь в дальнейшем использовать метод canPlayType для проверки на поддерживаемые кодеки (что будет описано в одной из следующих статей). Если же вам необходимо только проверить, поддерживаются ли элементы <audio> и <video>, то, как мне кажется, описанный выше в примерах 8 и 9 подход является более понятным и не менее эффективным.

[code]// Пример 10: Альтернативный способ обнаружения функции <audio>
if(document.createElement("audio").canPlayType) {
// Код, требующий поддержки audio
}[/code]
[code]// Example 11: Альтернативный способ обнаружения функции <video>
if(document.createElement("video").canPlayType) {
// Код, требующий поддержки video
}[/code]
Аналогичный альтернативный подход может быть использован для обнаружения поддержки <canvas>. Для этого большинство рабочих сред используют проверку наличия метода getContext. Это вполне объяснимо, учитывая, что этот метод необходим для получения контекста при рендеринге. Во избежание ложных срабатываний в ряде мобильных браузеров также необходима дополнительная проверка, удостоверяющая, что контекст на самом деле может быть получен (спасибо Полу Иришу (Paul Irish) за указание на это).

[code]// Example 12: Альтернативный способ обнаружения функции <canvas>
var canvas = document.createElement("canvas");
if(canvas.getContext && canvas.getContext("2d")) {
// Код, требующий поддержки canvas
}[/code]

Дальнейшие действия
Если раньше, решая, использовать ли <canvas>, <audio> или <video>, вы прибегали к обнаружению браузера, то теперь пришло время использовать для этого обнаружение функций. Также удостоверьтесь, что вверху кода вашей страницы указан DOCTYPE (например, <!DOCTYPE html>), так что ваш сайт не отображается в режиме Quirks Mode. В IE9 режим Quirks Mode используется для совместимости и, соответственно, элементы <canvas>, <audio> и <video> работать там не будут.

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

Тони Росс (Tony Ross),
Руководитель команды разработчиков


Источник: http://blogs.msdn.com/b/ieru
Перевод: Райкер