3. ПРЕИМУЩЕСТВА HTML5 ПЕРЕД FLASH
• Открытость платформы
• Чистая веб-технология
• Более высокие надѐжность, производительность и безопасность
• Более низкое энергопотребление
• Поддержка управления, с помощью сенсорных экранов
3
8. ДОБАВЛЕНИЕ МЕДИА МАТЕРИАЛА НА
СТРАНИЦУ
• Добавление аудиоматериала производится с помощью тега
<audio>…</audio>
• Добавление видеоматериала производится с помощью тега
<video>…</video>
• Браузеры, не поддерживающие HTML5 игнорируют теги и отображают
материал указанный между открывающим и закрывающим тегами
8
9. ПАРАМЕТРЫ ТЕГОВ
• src – принимает строку, которая определяет URL загружаемого контента
• autoplay – принимает логическое значение, определяющего начнѐтся ли
воспроизведение контента сразу после загрузки элемента
• loop – принимает логическое значение, указывающее будет ли
воспроизведение начато с начала после завершения
• muted – принимает логическое значение, указывающее будет ли
воспроизводится в беззвучном режиме
• controls – принимает логическое значение, указывающее, что
разработчик просит браузер предоставить встроенные компоненты
управления
• poster – только для тега <video>, принимает строку, определяющую URL
изображения-заглушки.
9
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"'>
10
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>
12
13. ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ
МЕДИАКОНТЕНТА
Основные JS-функции
• load() – Загружает медиафайл и подготавливает к воспроизведению
• play() – загружает и воспроизводит медиафайл
• pause() – приостанавливает воспроизведение медиафайла
• canPlayType(type) – возвращает булево значение, если браузер может
воспроизводить данный тип
13
14. ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ
МЕДИАКОНТЕНТА
Атрибуты доступные для чтения
• duration – продолжительность клипа
• paused – возвращает true – если воспроизведение приостановлено
• ended – возвращает true если клип завершился
• startTime – время с которого начинается воспроизведение
• error – возвращает код последней ошибки
• currentSrc – возвращает содержимое атрибута src
14
15. ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ
МЕДИАКОНТЕНТА
Основные JS-функции
• autoplay – устанавливает/возвращает установку атрибута autoplay
• loop – устанавливает/возвращает установку атрибута loop
• currentTime – устанавливает/возвращает количество времени прошедшее
с момента запуска файла
• controls – устанавливает/возвращает установку атрибута controls
• volume – устанавливает/возвращает уровень громкости
• muted – устанавливает/возвращает установку беззвучного режима
15
17. ОГРАНИЧЕНИЕ ИСПОЛЬЗОВАНИЯ
МЕДИА В HTML5
• Ограничения связанные с кросс-доменным разделением ресурсов
• Не возможность запуска полноэкранного видео из сценариев
• Не специфицирован доступ к контенту для людей с физическими
ограничениями
17
18. ВЗАИМОДЕЙСТВИЕ С ПОЛЬЗОВАТЕЛЕМ
• Для доступа к потоковым данным используется StreamAPI
• Тег <device>…</device> убран из спецификации 21.03.2011
18
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>
19
