Единая разметка: использование <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>
<!-- Пример 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), |