Единая разметка: использование
,
и
В этом блоге мы неоднократно обсуждали использование единой разметки в 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>
<!-- Пример 2: Простейшая альтернатива <audio> -->
<audio>
Этот текст отображается только в браузерах, не поддерживающих элемент audio.
</audio>
<!-- Пример 3: Простейшая альтернатива <video> -->
<video>
Этот текст отображается только в браузерах, не поддерживающих элемент video.
</video>
Но следует помнить, что резервное содержимое скрывается лишь визуально. Блоки <script> и остальные элементы в резервном содержимом будут исполняться всегда, даже если браузер поддерживает элементы <canvas>, <audio> и <video>.
<!-- Пример 4: <script> исполняется всегда -->
<canvas>
<script>
alert("Этот код исполняется всегда, даже при наличии поддержки canvas.");
</script>
</canvas>
Конечно, резервное содержимое в то же время должны быть и полезным. Что именно считать полезным зависит от ваших целей. Один из подходов заключается в том, чтобы указать пользователю, где он может загрузить обновление, но в большинстве случаев для обеспечения качественной работы пользователя лучше переключиться на альтернативные методы предоставления содержимого. Например, если вы используете прорисовку изображения, не слишком зависящего от canvas, вы можете вернуться к изображению, выводимому серверной стороной. Также в качестве альтернативы можно задействовать среду, реализующую canvas поверх существующих веб-технологий, или использовать широко распространенную надстройку.
Для элементов <audio> и <video> существует больше вариантов реализации обратной совместимости посредством надстроек, будь то медиа-проигрыватель или приложение, построенное на широко распространенных технологиях, таких как Flash или Silverlight. В самом крайнем случае вы можете предоставить пользователю ссылку на загрузку файла, чтобы он мог воспроизвести его локально. Примеры, приведенные ниже, в общих чертах иллюстрируют этот тип резервного действия, хотя тег <object> требует, как правило, ряд различающихся в зависимости от выбранной надстройки параметров.
<!-- Пример 5: Полезная альтернатива для <audio> -->
<audio src="myaudio">
<object type="audio-plugin-mime-type" data="myaudio">
<a href="myaudio">Загрузить аудиофайл</a>
</object>
</audio>
<!-- Пример 6: Полезная альтернатива для <video> -->
<video src="myvideo">
<object type="video-plugin-mime-type" data="myvideo">
<a href="myvideo">Загрузить видеофайл</a>
</object>
</video>
Обнаружение поддержки при помощи скрипта
Помимо HTML-разметки, поддержка элементов <canvas>, <audio> и <video> может быть обнаружена при помощи скрипта. Такое обнаружение может быть выполнено множеством различных способов, но простейшим из них является проверка на наличие соответствующего объекта интерфейса в window.
// Пример 7: Простейшее обнаружение функции <canvas>
if(window.HTMLCanvasElement) {
// Код, требующий поддержки canvas
}
// Пример 8: Простейшее обнаружение функции <audio>
if(window.HTMLAudioElement) {
// Код, требующий поддержки audio
}
// Пример 9: Простейшее обнаружение функции <video>
if(window.HTMLVideoElement) {
// Код, требующий поддержки video
}
Другой способ обнаружения <audio> и <video> заключается в проверке наличия метода canPlayType в динамически созданном элементе <audio> или <video>. Такой подход используется в некоторых рабочих средах и является предпочтительным, если вы намереваетесь в дальнейшем использовать метод canPlayType для проверки на поддерживаемые кодеки (что будет описано в одной из следующих статей). Если же вам необходимо только проверить, поддерживаются ли элементы <audio> и <video>, то, как мне кажется, описанный выше в примерах 8 и 9 подход является более понятным и не менее эффективным.
// Пример 10: Альтернативный способ обнаружения функции <audio>
if(document.createElement("audio").canPlayType) {
// Код, требующий поддержки audio}
// Пример 11: Альтернативный способ обнаружения функции <video>
if(document.createElement("video").canPlayType) {
// Код, требующий поддержки video }
Аналогичный альтернативный подход может быть использован для обнаружения поддержки <canvas>. Для этого большинство рабочих сред используют проверку наличия метода getContext. Это вполне объяснимо, учитывая, что этот метод необходим для получения контекста при рендеринге. Во избежание ложных срабатываний в ряде мобильных браузеров также необходима дополнительная проверка, удостоверяющая, что контекст на самом деле может быть получен (спасибо Полу Иришу (Paul Irish) за указание на это).
// Пример 12: Альтернативный способ обнаружения функции <canvas>
var canvas = document.createElement("canvas");
if(canvas.getContext && canvas.getContext("2d")) {
// Код, требующий поддержки canvas }
Дальнейшие действия
Если раньше, решая, использовать ли <canvas>, <audio> или <video>, вы прибегали к обнаружению браузера, то теперь пришло время использовать для этого обнаружение функций. Также удостоверьтесь, что вверху кода вашей страницы указан DOCTYPE (например, <!DOCTYPE html>), так что ваш сайт не отображается в режиме Quirks Mode. В IE9 режим Quirks Mode используется для совместимости и, соответственно, элементы <canvas>, <audio> и <video> работать там не будут.
В скором времени вы можете ожидать появление новых статей, описывающих обнаружение поддерживаемых кодеков и указание нескольких источников при помощи элементов <audio> и <video>
Тони Росс (Tony Ross),
Руководитель команды разработчиков