Embed Size (px)
Citation preview
ИНТЕРАКТИВНОСТЬ В HTML5
2
ИСТОРИЯ HTML5
3
ПРЕИМУЩЕСТВА HTML5 ПЕРЕД FLASH
• Открытость платформы
• Чистая веб-технология
• Более высокие надёжность, производительность и безопасность
• Более низкое энергопотребление
• Поддержка управления, с помощью сенсорных экранов
4
ПОДДЕРЖИВАЕМЫЕ КОДЕКИ
• Аудиокодеки:
o AAC;
o MPEG-3
o Ogg Vorbis
• Видеокодеки:
o H.264
o VP8
o Ogg Theora
5
ПОДДЕРЖКА КОДЕКА OGG THEORA
6
ПОДДЕРЖКА КОДЕКА WEBM
7
ПОДДЕРЖКА КОДЕКА H.264
8
ДОБАВЛЕНИЕ МЕДИА МАТЕРИАЛА НА СТРАНИЦУ
• Добавление аудиоматериала производится с помощью тега <audio>…</audio>
• Добавление видеоматериала производится с помощью тега <video>…</video>
• Браузеры, не поддерживающие HTML5 игнорируют теги и отображают материал указанный между открывающим и закрывающим тегами
9
ПАРАМЕТРЫ ТЕГОВ
• src – принимает строку, которая определяет URL загружаемого контента
• autoplay – принимает логическое значение, определяющего начнётся ли воспроизведение контента сразу после загрузки элемента
• loop – принимает логическое значение, указывающее будет ли воспроизведение начато с начала после завершения
• muted – принимает логическое значение, указывающее будет ли воспроизводится в беззвучном режиме
• controls – принимает логическое значение, указывающее, что разработчик просит браузер предоставить встроенные компоненты управления
• poster – только для тега <video>, принимает строку, определяющую URL изображения-заглушки.
10
ИСПОЛЬЗОВАНИЯ ТЕГА <SOURCE>
• Тег <source> используется внутри тегов <audio> и <video>
• Тег используется для указания альтернативных источников медиа
• Основные параметры тега:
o src – обязательный атрибут, принимающий строку, содержащую URL медиаконтента
o type – параметр принимающий строку, содержащий MIME тип медиа контента, иногда используется с параметром codecs – принимающим строку, содержащую точную строку-наименование кодека медиа-контента по RFC4281.
Например, видеокодек Theora, аудиокодек Vorbis в контейнере Ogg:
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
11
ПРИМЕР ДОБАВЛЕНИЯ АУДИОМАТЕРИАЛА
<!doctype html>
…
<body>
<audio src="audio.mp3" autoplay>
Your browser doesn't support tag audio.
</audio>
</body>
12
ПРИМЕР ДОБАВЛЕНИЯ ВИДЕОМАТЕРИАЛА
<!doctype html>
…
<body>
<video controls width="800" height="600" poster="poster.png">
<source src="video.webm"></source>
<source src="video.mp4"></source>
Your browser doesn't support tag video.
<video>
</body>
13
ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ МЕДИАКОНТЕНТА
Основные JS-функции
• load() – Загружает медиафайл и подготавливает к воспроизведению
• play() – загружает и воспроизводит медиафайл
• pause() – приостанавливает воспроизведение медиафайла
• canPlayType(type) – возвращает булево значение, если браузер может воспроизводить данный тип
14
ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ МЕДИАКОНТЕНТА
Атрибуты доступные для чтения
• duration – продолжительность клипа
• paused – возвращает true – если воспроизведение приостановлено
• ended – возвращает true если клип завершился
• startTime – время с которого начинается воспроизведение
• error – возвращает код последней ошибки
• currentSrc – возвращает содержимое атрибута src
15
ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ МЕДИАКОНТЕНТА
Основные JS-функции
• autoplay – устанавливает/возвращает установку атрибута autoplay
• loop – устанавливает/возвращает установку атрибута loop
• currentTime – устанавливает/возвращает количество времени прошедшее с момента запуска файла
• controls – устанавливает/возвращает установку атрибута controls
• volume – устанавливает/возвращает уровень громкости
• muted – устанавливает/возвращает установку беззвучного режима
16
СОЗДАНИЕ ПРОСТОГО АУДИОПЛЕЕРА<audio src="audio.mp3" id='player'>
Your browser doesn't support tag audio.</audio><form action="">
Current position <label title="Current position"><input type="range" id="current" /></label> /
<span id="totalduration"></span><br />Volume <label title="Volume"><input type="range" name="volume"
min="0" max="100" step="1" /></label><br /><input type="button" value="Muted" id="mute" /><br /><input type="button" value="Play" id="play" /><br /><label title="Track">
<select><option value="audio.mp3" selected>Track
1</option><option value="audio2.mp3">Track 2</option><option value="audio3.mp3">Track 3</option><option value="audio4.mp3">Track 4</option>
</select></label>
</form>
17
ОГРАНИЧЕНИЕ ИСПОЛЬЗОВАНИЯ МЕДИА В HTML5
• Ограничения связанные с кросс-доменным разделением ресурсов
• Не возможность запуска полноэкранного видео из сценариев
• Не специфицирован доступ к контенту для людей с физическими ограничениями
18
• Для доступа к потоковым данным используется StreamAPI
• Тег <device>…</device> убран из спецификации 21.03.2011
ВЗАИМОДЕЙСТВИЕ С ПОЛЬЗОВАТЕЛЕМ
19
ПОЛУЧЕНИЕ ДОСТУПА К ПОЛЬЗОВАТЕЛЬСКОМУ МЕДИА• Для получения доступа к пользовательскому медиа используется
функция:
navigator.getUserMedia(options, successCallback, [errorCallback])
• options – тип контента audio или/и video, тег видео может сопровождаться параметрами user или enviroment
• successCallback – функция, которая вызывается при удачном открытие потока
• errorCallback – функция, которая вызывается при ошибке
Например:
<script> navigator.getUserMedia('audio,video user', gotAudio);function gotAudio(stream) { // ... use 'stream' ... }
</script>
20
РАБОТА С ПОЛЬЗОВАТЕЛЬСКИМ МЕДИАКОНТЕНТОМ
21
ИСПОЛЬЗОВАННЫЕ ИСТОЧНИКИ
• http://evolutionofweb.appspot.com
• http://caniuse.com
• http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents
• http://www.apple.com/hotnews/thoughts-on-flash/
• Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов
