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

Article
10/01/2010

Единая разметка: использование

В этом блоге мы неоднократно обсуждали использование единой разметки в 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),

Руководитель команды разработчиков

Additional resources