ИНТЕРАКТИВНОСТЬ В HTML5. ИСТОРИЯ HTML5 2 ПРЕИМУЩЕСТВА HTML5 ПЕРЕД FLASH 3 Открытость платформы Чистая веб-технология Более высокие надёжность, производительность. - презентация

1 ИНТЕРАКТИВНОСТЬ В HTML5

2 ИСТОРИЯ HTML5 2

3 ПРЕИМУЩЕСТВА HTML5 ПЕРЕД FLASH 3 Открытость платформы Чистая веб-технология Более высокие надёжность, производительность и безопасность Более низкое энергопотребление Поддержка управления, с помощью сенсорных экранов

4 ПОДДЕРЖИВАЕМЫЕ КОДЕКИ 4 Аудиокодеки: o AAC; o MPEG-3 o Ogg Vorbis Видеокодеки: o H.264 o VP8 o Ogg Theora

5 ПОДДЕРЖКА КОДЕКА OGG THEORA 5

6 ПОДДЕРЖКА КОДЕКА WEBM 6

7 ПОДДЕРЖКА КОДЕКА H.264 7

8 ДОБАВЛЕНИЕ МЕДИА МАТЕРИАЛА НА СТРАНИЦУ 8 Добавление аудиоматериала производится с помощью тега … Добавление видеоматериала производится с помощью тега … Браузеры, не поддерживающие HTML5 игнорируют теги и отображают материал указанный между открывающим и закрывающим тегами

9 ПАРАМЕТРЫ ТЕГОВ 9 src – принимает строку, которая определяет URL загружаемого контента autoplay – принимает логическое значение, определяющего начнётся ли воспроизведение контента сразу после загрузки элемента loop – принимает логическое значение, указывающее будет ли воспроизведение начато с начала после завершения muted – принимает логическое значение, указывающее будет ли воспроизводится в беззвучном режиме controls – принимает логическое значение, указывающее, что разработчик просит браузер предоставить встроенные компоненты управления poster – только для тега, принимает строку, определяющую URL изображения-заглушки.

10 ИСПОЛЬЗОВАНИЯ ТЕГА 10 Тег используется внутри тегов и Тег используется для указания альтернативных источников медиа Основные параметры тега: o src – обязательный атрибут, принимающий строку, содержащую URL медиа контента o type – параметр принимающий строку, содержащий MIME тип медиа контента, иногда используется с параметром codecs – принимающим строку, содержащую точную строку-наименование кодека медиа- контента по RFC4281. Например, видеокодек Theora, аудио кодек Vorbis в контейнере Ogg:

11 ПРИМЕР ДОБАВЛЕНИЯ АУДИОМАТЕРИАЛА 11 … Your browser doesn't support tag audio.

12 ПРИМЕР ДОБАВЛЕНИЯ ВИДЕОМАТЕРИАЛА 12 … Your browser doesn't support tag video.

13 ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ МЕДИАКОНТЕНТА 13 Основные JS-функции load() – Загружает медиафайл и подготавливает к воспроизведению play() – загружает и воспроизводит медиафайл pause() – приостанавливает воспроизведение медиафайла canPlayType(type) – возвращает булево значение, если браузер может воспроизводить данный тип

14 ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ МЕДИАКОНТЕНТА 14 Атрибуты доступные для чтения duration – продолжительность клипа paused – возвращает true – если воспроизведение приостановлено ended – возвращает true если клип завершился startTime – время с которого начинается воспроизведение error – возвращает код последней ошибки currentSrc – возвращает содержимое атрибута src

15 ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ МЕДИАКОНТЕНТА 15 Основные JS-функции autoplay – устанавливает/возвращает установку атрибута autoplay loop – устанавливает/возвращает установку атрибута loop currentTime – устанавливает/возвращает количество времени прошедшее с момента запуска файла controls – устанавливает/возвращает установку атрибута controls volume – устанавливает/возвращает уровень громкости muted – устанавливает/возвращает установку беззвучного режима

16 СОЗДАНИЕ ПРОСТОГО АУДИОПЛЕЕРА 16 Your browser doesn't support tag audio. Current position / Volume Track 1 Track 2 Track 3 Track 4

17 ОГРАНИЧЕНИЕ ИСПОЛЬЗОВАНИЯ МЕДИА В HTML5 17 Ограничения связанные с кросс-доменным разделением ресурсов Не возможность запуска полноэкранного видео из сценариев Не специфицирован доступ к контенту для людей с физическими ограничениями

18 Для доступа к потоковым данным используется StreamAPI Тег … убран из спецификации ВЗАИМОДЕЙСТВИЕ С ПОЛЬЗОВАТЕЛЕМ 18

19 ПОЛУЧЕНИЕ ДОСТУПА К ПОЛЬЗОВАТЕЛЬСКОМУ МЕДИА 19 Для получения доступа к пользовательскому медиа используется функция: navigator.getUserMedia(options, successCallback, [errorCallback]) options – тип контента audio или/и video, тег видео может сопровождаться параметрами user или enviroment successCallback – функция, которая вызывается при удачном открытие потока errorCallback – функция, которая вызывается при ошибке Например: navigator.getUserMedia('audio,video user', gotAudio); function gotAudio(stream) { //... use 'stream'... }

20 РАБОТА С ПОЛЬЗОВАТЕЛЬСКИМ МЕДИАКОНТЕНТОМ 20

21 ИСПОЛЬЗОВАННЫЕ ИСТОЧНИКИ work/multipage/index.html#contents work/multipage/index.html#contents Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов