1.1 Преимущества html5

На данный момент для встраивания интерактивного контента, наиболее популярной технологией является Adobe Flash. Однако большинство разработчиков отказываются от неё. Так, Apple отказался от поддержки соответствующего плагина в своём браузере Safari и операционной системе iOS, Microsoft отказывается от поддержки Flash плагина в своём браузере Internet Explorer 10, в Android Market Flash плагин имеет наименьшие оценки. Большинство разработчиков заявляют, что наибольшее число feedback о ненормальном прекращении работы их продуктов связано именно с плагином Adobe Flash.

Так, HTML5 имеет следующие преимущества по сравнению с технологией Adobe Flash:

• Открытость платформы. Связанное с флеш ПО на 100% частное. Эти продукты доступны только в Adobe, и Adobe владеет монополией на их развитие, на ценообразование и т.д. Их широкая распространённость не означает их открытость, т.к. они производятся и контролируются Adobe. Почти по всем признакам флеш – закрытая система.

• Доступ ко всем веб-технологиям. Такие технологии как просмотр фильмов, игры, работа с пользовательским интерактивом ранее были доступны, только для пользователей технологии Adobe Flash, теперь, добиться тех же результатов можно с помощью чистой веб технологии

• Более высокие надёжность, производительность и безопасность. Symantec выделил флеш, как технологию с одним из худших рангов уязвимости в 2009 году. Так же выполнение определённого кода позволяет закрыть браузер и начать выполнение процесса вне его песочницы и собрать информацию о системе и её уязвимостях.

• Более низкое энергопотребление. Чтобы батареи при проигрывании видео хватало надолго, гаджеты должны аппаратно декодировать видео, программный декодинг слишком энергоёмок. Многие современные устройства содержат аппаратный декодер H.264 – промышленный стандарт, использующийся в Blue-ray DVD плеерах принятый Apple, Google (YouTube), Netflix и многими другими компаниями. Хотя флеш с недавнего времени поддерживает H.264, почти на всех флеш-сайтах видео требует декодера прошлого поколения, не реализованного аппаратно и декодируется программно. Разница поразительна: на айфоне видео H.264 воспроизводится до 10 часов, в то время, как в программном декодинге менее 5 часов на одном заряде батареи.

• Поддержка управления, с помощью сенсорных экранов. Флеш был придуман для ПК с мышью, не для управления пальцами. Например, много флеш-сайтов основаны на «onMouseOver»-событии от которого срабатывают меню и другие элементы. Multi-touch интерфейс не использует мышь, поэтому нет аналога для «onMouseOver»-события. Большинство флеш-сайтов должны быть переписаны, чтобы поддерживать сенсорный интерфейс, почему бы не переписать их сразу в HTML5, CSS и Javascript?

1.2 Работа с медиа элементами

При работе с медиаконтентом следует не забывать, что браузер может воспроизводить только медиа, закодированное строго ограниченным набором кодеков. Среди которых:

Аудиокодеки:

• AAC;

• MPEG-3;

• Ogg Vorbis.

Видеокодеки:

• H.264;

• VP8;

• Ogg Theora.

Так же, не следует забывать, что определённые браузеры могут воспроизводить контент, закодированный строго определёнными кодеками. Так, по состоянию на 29 октября 2011 г., возможность воспроизведения контента представлена на рисунках 2.1 – 2.3.

Рисунок 2.1 – Поддержка кодека Ogg Theora

Рисунок 2.2 – Поддержка кодека WebM/VP8

Рисунок 2.3 – Поддержка кодека H.264/MPEG-4

Для работы с медиаконтентом в HTML5 используются теги <audio>…</audio> для работы с аудио контентом и <video>…</video> для работы с видео контентом. Данный тег указывает браузеру необходимость создания контрола для работы с соответствующим контентом. Примеры контролов, генерируемых браузером Google Chrome, представлены на рисунках 2.4 – 2.5.

Рисунок 2.4 – Контрол для работы с аудио контентом

Рисунок 2.5 – Контрол для работы с видео материалом (отображается клип на композицию БИ-2 – «Оптимист»)

Данные теги принимают ряд необязательных параметров:

• src – принимает строку, которая определяет URL загружаемого контента.

• autoplay – принимает логическое значение, определяющего начнётся ли воспроизведение контента сразу после загрузки элемента.

• loop – принимает логическое значение, указывающее будет ли воспроизведение начато с начала после завершения.

• muted – принимает логическое значение, указывающее будет ли воспроизводится в беззвучном режиме.

• controls – принимает логическое значение, указывающее, что разработчик просит браузер предоставить встроенные компоненты управления, в случае не указания данного параметра, контролы, указанные на рисунках 2.4 – 2.5, созданы не будут, и их создание полностью лежит на программисте.

• poster – только для тега <video>, принимает строку, определяющую URL изображения-заглушки.

Как уже было замечено ранее, разные браузеры поддерживают разные наборы кодеков. Для создания, контента, который будет воспроизводиться одинаково во всех браузерах, используется тег <source>…</source>, который вкладывается внутрь основного тега. Теги <source> - рассматриваются браузером последовательно сверху-вниз до момента, пока не встретится первый источник, который может быть воспроизведён. Если не встретится контент, который закодирован кодеком, который понимается браузером – воспроизведение начато не будет.

Тег <source> получает следующие параметры:

• src – обязательный атрибут, принимающий строку, содержащую URL медиаконтента

• type – параметр, принимающий строку, которая содержит MIME тип медиа контента. Параметр иногда используется с подпараметром codecs, принимающим строку, которая содержит точную строку-наименование кодека медиа-контента по RFC4281.

Образец использования тега <source>:

<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

Для работы с контентом используются следующие js – функции:

• load() – загружает медиафайл и подготавливает его к воспроизведению. Вызов данной функции в явном виде, почти никогда не требуется. Исключение составляет только загрузка контента, который создается динамически;

• play() – загружает и воспроизводит медиафайл. Также служит для восстановления воспроизведения после приостановки;

• pause() – приостанавливает воспроизведение медиафайла;

• canPlayType(type) – возвращает булево значение, если браузер может воспроизводить данный тип. В качестве типа передаётся MIME-typeвоспроизводимого контента.

Для анализа текущего состояния воспроизводимого контента используются следующие readonly-параметры.

• duration – возвращает число с плавающей точкой, показывающее продолжительность клипа в секундах;

• paused – возвращает true – если воспроизведение приостановлено;

• ended – возвращает true если клип завершился;

• startTime – возвращает число с плавающей точкой, показывающее время с которого начинается воспроизведение в секундах. Чаще всего равняется 0.0. Исключение составляет потоковый контент. В данном случае возвращается время, с которого медиаконтент содержится в буфере;

• error – возвращает код последней ошибки;

• currentSrc – возвращает строку – содержимое атрибута src.

Для управления состоянием воспроизведения контента, используются следующие параметры:

• autoplay – устанавливает/возвращает установку атрибута autoplay;

• loop – устанавливает/возвращает установку атрибута loop;

• currentTime – устанавливает/возвращает количество времени прошедшее с момента запуска файла в секундах.;

• controls – устанавливает/возвращает установку атрибута controls;

• volume – устанавливает/возвращает уровень громкости. Уровень громкости указывается числом плавающей точкой от 0.0 до 1.0;

• muted – устанавливает/возвращает установку беззвучного режима.