Видео и аудио

9 10 11 12 13 14 15

Оглавление

Оглавление. 1

Введение. 2

HTML-5. 2

Видео и аудио. 3

Семантические тэги. 4

Новые input в формах. 7

Веб хранилища. 9

Drag & Drop. 9

Геолокация. 9

Кэширование. 10

CSS 3. 10

Скругления и тени. 10

Фоны и градиент. 10

2D анимации. 10

3D анимации. 10

Заключение. 11

Дополнительный материал: 11

Литература. 11

Введение

HTML5 - это новая версия HTML. Предыдущая версия HTML была выпущена в 1999 году, за это время всемирная паутина сильно изменилась и поэтому изменения требовались и от HTML.

В HTML5 было добавлено много нового, поэтому некоторые возможности, которые были доступны в HTML4 только с использованием внешних плагинов (таких как Adobe Flash) или клиентских скриптов теперь доступны с помощью обычных разметочных тэгов.

HTML5 все еще в разработке, но его частичную поддержку имеют все современные браузеры, поэтому использовать новые возможности Вы можете уже сейчас.

HTML-5

Наиболее интересные нововведения HTML5:

· Поддержка видео и аудио (элементы video и audio);

· Возможности рисования на веб-страницах произвольных объектов (элемент canvas);

· Улучшение форм (новые значения type для <input> и множество новых элементов и атрибутов);

· Добавление семантических тэгов, позволяющих сделать веб-страницы более понятными для поисковых систем, браузеров и других программ и устройств читающих веб-страницы (элементы footer, header, nav, article);

· DOM хранилища - более функциональная альтернатива cookie.

Все HTML5 документы должны начинаться с объявления DOCTYPE. Предыдущие версии HTML имели несколько типов DOCTYPE. HTML5 имеет только один:

<!DOCTYPE html>

Видео и аудио

HTML5 вводит специальный тэг <video> позволяющий встраивать в веб-страницы видео файлы.

Обратите внимание: поддержку видео имеют браузеры: Internet Explorer 9+, Opera 10.50+, Firefox 3.5+, Chrome 3.0+, Safari 3.1+.

Атрибут src тэга <video> позволяет указать путь к видео файлу, который будет воспроизведен. Атрибут controls отображает в плеере кнопки управления видео, a атрибуты height (высота) и width (ширина) задают размеры плеера.

Видео из предыдущего примера будет нормально проигрываться только в браузерах Opera, Firefox и Chrome. Это происходит из-за того, что в данный момент разные браузеры поддерживают разные форматы.

Opera и Firefox поддерживают формат Ogg (с видео кодеком Theora и аудио кодеком Vorbis) и WebM (с видео кодеком VP8 и аудио кодеком Vorbis), а Internet Explorer и Safari поддерживают MPEG4 (с видео кодеком H.264 и аудио кодеком AAC). Браузер Chrome имеет поддержку всех перечисленных форматов.

Таким образом для того, чтобы видео нормально воспроизводилось во всех браузерах необходимо добавить источники в формате Ogg и MPEG4 (или WebM и MPEG4).

С помощью тэга <source> Вы можете предоставить несколько источников видео в разных форматах для воспроизведения. Браузер будет использовать первый поддерживаемый им формат.

</video>

Аналогично с помощью нового HTML5 элемента <audio> Вы можете добавить на Ваш веб-сайт музыкальный трек или подкаст с помощью обычного разметочного тэга.

Данный текст будет выведен если браузер пользователя не поддерживает элемент audio.

</audio>

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: