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

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

ИНТЕРАКТИВНОСТЬ В HTML5
ИСТОРИЯ HTML5
2
ПРЕИМУЩЕСТВА HTML5 ПЕРЕД FLASH
•
Открытость платформы
•
Чистая веб-технология
•
Более высокие надёжность, производительность и безопасность
•
Более низкое энергопотребление
•
Поддержка управления, с помощью сенсорных экранов
3
ПОДДЕРЖИВАЕМЫЕ КОДЕКИ
• Аудиокодеки:
o AAC;
o MPEG-3
o Ogg Vorbis
• Видеокодеки:
o H.264
o VP8
o Ogg Theora
4
ПОДДЕРЖКА КОДЕКА OGG THEORA
5
ПОДДЕРЖКА КОДЕКА WEBM
6
ПОДДЕРЖКА КОДЕКА H.264
7
ДОБАВЛЕНИЕ МЕДИА МАТЕРИАЛА НА
СТРАНИЦУ
•
Добавление аудиоматериала производится с помощью тега
<audio>…</audio>
•
Добавление видеоматериала производится с помощью тега
<video>…</video>
•
Браузеры, не поддерживающие HTML5 игнорируют теги и отображают
материал указанный между открывающим и закрывающим тегами
8
ПАРАМЕТРЫ ТЕГОВ
•
src – принимает строку, которая определяет URL загружаемого контента
•
autoplay – принимает логическое значение, определяющего начнётся ли
воспроизведение контента сразу после загрузки элемента
•
loop – принимает логическое значение, указывающее будет ли
воспроизведение начато с начала после завершения
•
muted – принимает логическое значение, указывающее будет ли
воспроизводится в беззвучном режиме
•
controls – принимает логическое значение, указывающее, что
разработчик просит браузер предоставить встроенные компоненты
управления
•
poster – только для тега <video>, принимает строку, определяющую URL
изображения-заглушки.
9
ИСПОЛЬЗОВАНИЯ ТЕГА <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"'>
10
ПРИМЕР ДОБАВЛЕНИЯ
АУДИОМАТЕРИАЛА
<!doctype html>
…
<body>
<audio src="audio.mp3" autoplay>
Your browser doesn't support tag audio.
</audio>
</body>
11
ПРИМЕР ДОБАВЛЕНИЯ
ВИДЕОМАТЕРИАЛА
<!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>
12
ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ
МЕДИАКОНТЕНТА
Основные JS-функции
•
load() – Загружает медиафайл и подготавливает к воспроизведению
•
play() – загружает и воспроизводит медиафайл
•
pause() – приостанавливает воспроизведение медиафайла
•
canPlayType(type) – возвращает булево значение, если браузер может
воспроизводить данный тип
13
ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ
МЕДИАКОНТЕНТА
Атрибуты доступные для чтения
•
duration – продолжительность клипа
•
paused – возвращает true – если воспроизведение приостановлено
•
ended – возвращает true если клип завершился
•
startTime – время с которого начинается воспроизведение
•
error – возвращает код последней ошибки
•
currentSrc – возвращает содержимое атрибута src
14
ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ
МЕДИАКОНТЕНТА
Основные JS-функции
•
autoplay – устанавливает/возвращает установку атрибута autoplay
•
loop – устанавливает/возвращает установку атрибута loop
•
currentTime – устанавливает/возвращает количество времени прошедшее
с момента запуска файла
•
controls – устанавливает/возвращает установку атрибута controls
•
volume – устанавливает/возвращает уровень громкости
•
muted – устанавливает/возвращает установку беззвучного режима
15
СОЗДАНИЕ ПРОСТОГО АУДИОПЛЕЕРА
<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>
16
ОГРАНИЧЕНИЕ ИСПОЛЬЗОВАНИЯ
МЕДИА В HTML5
•
Ограничения связанные с кросс-доменным разделением ресурсов
•
Не возможность запуска полноэкранного видео из сценариев
•
Не специфицирован доступ к контенту для людей с физическими
ограничениями
17
ВЗАИМОДЕЙСТВИЕ С ПОЛЬЗОВАТЕЛЕМ
•
Для доступа к потоковым данным используется StreamAPI
•
Тег <device>…</device> убран из спецификации 21.03.2011
18
ПОЛУЧЕНИЕ ДОСТУПА К
ПОЛЬЗОВАТЕЛЬСКОМУ МЕДИА
•
Для получения доступа к пользовательскому медиа используется
функция:
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>
19
РАБОТА С ПОЛЬЗОВАТЕЛЬСКИМ
МЕДИАКОНТЕНТОМ
20
ИСПОЛЬЗОВАННЫЕ ИСТОЧНИКИ
•
http://evolutionofweb.appspot.com
•
http://caniuse.com
•
http://www.whatwg.org/specs/web-apps/currentwork/multipage/index.html#contents
•
http://www.apple.com/hotnews/thoughts-on-flash/
•
Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов
21

Directory