Download to read offline
![ПОЛУЧЕНИЕ ДОСТУПА К
ПОЛЬЗОВАТЕЛЬСКОМУ МЕДИА
• Для получения доступа к пользовательскому медиа используется
функция:
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](https://image.slidesharecdn.com/html5-111030044807-phpapp01/75/Html5-19-2048.jpg)
Uploaded byAlexander Samantsov
Интерактивность в Html5
Документ описывает особенности HTML5, включая преимущества перед Flash, поддержку различных аудио и видео кодеков, а также способы добавления медиа-контента на веб-страницы. Упоминаются ключевые теги, такие как <audio> и <video>, их атрибуты и параметры, а также основные функции JavaScript для динамического управления медиаплеерами. Наконец, рассматриваются ограничения HTML5, включая вопросы кросс-доменных ресурсов и доступ к пользовательскому медиаконтенту.
Интерактивность в Html5
- 1.
- 2.
- 3. ПРЕИМУЩЕСТВА HTML5 ПЕРЕДFLASH • Открытость платформы • Чистая веб-технология • Более высокие надѐжность, производительность и безопасность • Более низкое энергопотребление • Поддержка управления, с помощью сенсорных экранов 3
- 4. ПОДДЕРЖИВАЕМЫЕ КОДЕКИ • Аудиокодеки: oAAC; o MPEG-3 o Ogg Vorbis • Видеокодеки: o H.264 o VP8 o Ogg Theora 4
- 5. ПОДДЕРЖКА КОДЕКА OGGTHEORA 5
- 6.
- 7.
- 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
- 11. ПРИМЕР ДОБАВЛЕНИЯ АУДИОМАТЕРИАЛА <!doctype html> … <body> <audio src="audio.mp3" autoplay> Your browser doesn't support tag audio. </audio> </body> 11
- 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
- 16. СОЗДАНИЕ ПРОСТОГО АУДИОПЛЕЕРА <audiosrc="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
- 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
- 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 для профессионалов 21