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

Презентация:



Advertisements
Похожие презентации
11 класс. №031. МУЛЬТИМЕДИА НА WEB-СТРАНИЦАХ.
Advertisements

Введение в Java Script УРОК 1. Пример ПЕРВЫЙ Открыть программу блокнот и записать следующую команду: Сохранить файл С расширением JS загрузить файл Двойным.
1 Национальный аэрокосмический университет им. Н.Е. Жуковского Харьковский авиационный институт Кафедра компьютерных систем и сетей г. Харьков,
РАЗРАБОТКА WEB-САЙТОВ.. Создание Web-сайтов реализуется с помощью языка разметки гипертекстовых документов HTML. Тэги – инструкции браузеру, указывающие.
КУРС «WEB-ДИЗАЙН». Что такое Web-страница? То, что мы видим в окне браузера, когда заходим на какой-либо сайт! Мы видим веб-страницу сайта – ее содержимое!
Java-script – обзор и возможности.. JavaScript объектно-ориентированный скриптовый язык программирования. JavaScript обычно используется как встраиваемый.
HTML (от англ. Hyper Text Markup Language «язык разметки гипертекста») стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц.
Знакомство с NET SUPPORT SCHOOL NET SUPPORT SCHOOL © Семизоров Е.П.
Фреймы в HTML. Фреймы Фрейм (англ. frame кадр, рамка) в самом общем случае данное слово обозначает структуру, содержащую некоторую информацию. Фрейм (в.
Текстовые файлы Вербицкая Ольга Владимировна, Заозерная школа 16.
Основы Html HTML – HyperText Markup Language – язык разметки гипертекста
Основы языка HTML: тэги, атрибуты тэгов, комментарии.
Web-документ (или Web-страница) - это гипертекстовый документ, содержащий в себе ссылки на различные информационные ресурсы: другие Web-документы, графические,
Социальные медиасервисы. Социальные медиасервисы сервисы для совместного хранения медиафайлов Фотографии, схемы, рисунки. Видео. Документы (книги). Аудиозаписи.
Лекция 11 Тема «Формы » Преподаватель: Халелова Е.Н.
Powerpoint Templates Page 1 Язык разметки гипертекста HTML.
Гиперссылка состоит из двух частей: адреса и указателя ссылки. Для определения гиперссылки используется тег и его атрибута HREF, структура которого имеет.
Переменные и операторы УРОК 2. Переменные ПЕРЕМЕННАЯ – ?... контейнер для хранения данных. Переменная имеет имя – это….? последовательность букв, цифр.
Web-страницы и Web-сайты. Структура Web- страницы.
Публикация во Всемирной паутине реализуется в форме WEB – сайтов. Сайт является интерактивным средством представления информации. WEB - сайт состоит из.
Транксрипт:

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

ИСТОРИЯ HTML5 2

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

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

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

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

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

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

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

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

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

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

ДИНАМИЧЕСКОЕ ИЗМЕНЕНИЕ МЕДИАКОНТЕНТА 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 Your browser doesn't support tag audio. Current position / Volume Track 1 Track 2 Track 3 Track 4

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

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

ПОЛУЧЕНИЕ ДОСТУПА К ПОЛЬЗОВАТЕЛЬСКОМУ МЕДИА 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

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