Для дальнейшего изучения

Для дальнейшего изучения

Пособие по использованию холста (https://developer..mozilla..org/en/Canvas_tutorial)

на сайте Центра Mozilla для веб-разработчиков.

«Холст в HTML5: основы» (http://dev..opera..com/articles/view/html-5-canvas-the- basics/) — статья Михая Сукана (Mihai Sucan).

Образцы применения HTML-тега <canvas>, инструменты и руководства (http:// www..canvasdemos..com).

Тег <canvas> (http://bit..ly/9JHzOf) в черновике стандарта HTML5.

5 Видео в Сети1

Приступим

Любой человек, которому за последние четыре года хотя бы раз довелось посетить YouTube..com, знает, что на веб-страницах можно размещать видеоклипы. Но до появления HTML5 стандартизованного способа делать это не существовало. Едва ли не все видео, которое вам когда-либо приходилось видеть в Сети, достигало ваших глаз через сторонние приложения: QuickTime, RealPlayer или Flash (на YouTube,

в частности, применяется Flash). Такие приложения достаточно тесно интегрированы с браузером, так что пользователь может даже не сознавать, что пользуется ими. Попробуйте открыть веб-видео на платформе, не поддерживающей нужное приложение, чтобы понять реальное положение вещей.

HTML5определяетстандартныйспособвстраиваниявидеонавеб-страницы —тег <video>. Поддержку тега <video> в браузерах до сих пор улучшают, то есть, если говорить более прямо, он пока не работает или, во всяком случае, работает не везде. Однако не отчаивайтесь: есть множество альтернатив и компромиссных вариантов.

В табл. 5.1 показано, в каких браузерах на момент написания книги имелась поддержка тега <video>.

Таблица 5.1. Поддержка тега <video>

Поддержкатега<video> —толькочастьвопроса.ПреждечемговоритьобHTML5- видео, надо усвоить некоторые общие сведения о видеофайлах (если в этой области вы достаточно подготовлены, переходите сразу к разделу «Что работает в Интернете?» этой главы).

Видеоконтейнеры

Говоря о видеофайлах, часто упоминают AVI-файлы, MP4-файлы и т. п. На самом же деле AVI и MP4 — это лишь форматы контейнеров. Как в ZIP-файле может

1В этой главе мы используем слово «контейнер» только в значении «видеоконтейнер». В остальных главах оно может употребляться как равнозначное с терминами «элемент» и «тег». — Примеч. перев.

помещаться информация любого рода, так и в мультимедийном контейнере определен только способ хранения содержимого, а не тип этого содержимого (вообщето ситуация чуть сложнее: совместимы между собой не все видеопотоки и форматы контейнеров, но пока это неважно).

Видеофайл обычно содержит не менее двух дорожек: видеодорожку (без звука)

иодну или несколько аудиодорожек (без картинки). Дорожки, как правило, взаимосвязаны посредством маркеров в аудиоданных; с их помощью достигается согласованность звукового ряда со зрительным. Отдельные дорожки могут быть оснащены метаинформацией, такой как соотношение сторон кадра (в видео) или язык (в аудио). Метаданные целого видеофайла: название, графическая заставка, номер эпизода телесериала и т. д. — тоже могут присутствовать в контейнере.

Есть немало форматов видеоконтейнеров. Рассмотрим некоторые из самых популярных.

MPEG-4 — файлы с расширением MP4 и M4V. Контейнер MPEG-4 основан на ранееразработаннойAppleтехнологииконтейнеровQuickTime(расширениеMOV). Трейлеры фильмов на сайте Apple до сих пор публикуются в этих более старых контейнерах, а фильмы на iTunes распространяются в MPEG-4.

Flash Video — файлы с расширением FLV. Воспроизводятся, естественно, про­ игрывателемAdobeFlash.ВверсияхFlash,болееранних,чем9.0.60.184(FlashPlayer9

с пакетом обновлений 3), поддерживался только этот формат контейнеров. В новых версиях добавилась поддержка MPEG-4.

Ogg — файлы с расширением OGV. Это открытый стандарт, не ограниченный какими-либо патентами и дружественный к open-source-сообществу. Встроенная поддержка формата контейнеров Ogg, Ogg-видеокодека Theora и аудиокодека

Vorbis имеется в Firefox 3.5, Chrome 4 и Opera 10.5. Все основные дистрибутивы

Linux умеют работать с Ogg сразу после установки, а на десктопных платформах Mac и Windows должны быть дополнительно установлены компоненты QuickTime

ифильтры DirectShow соответственно. Воспроизводить Ogg на всех платформах умеет превосходный проигрыватель VLC (http://www..videolan..org/vlc/).

WebM — файлы с расширением WEBM. Это новый формат видеоконтейнеров, технически очень похожий на другой, более ранний формат под названием Matroska («Матрешка»). О создании WebM было объявлено на Конференции разработчиков Google I/O 2010. Его планируется использовать исключительно в связке с видеокодеком VP8 и аудиокодеком Vorbis (о которых подробнее читайте далее). Встроенная поддержка WebM-видео обещает быть в очередных версиях Chromium, Google Chrome, Mozilla Firefox и Opera. Компания Adobe так-

же объявила, что следующая версия Flash будет поддерживать формат WebM. Audio Video Interleave («чередование аудио и видео») — файлы с расширением

AVI. Формат видеоконтейнеров AVI был разработан Microsoft в те добрые времена, когда сама способность компьютера воспроизводить видео была еще в диковинку. В AVI нет документированной поддержки многих функций, которые есть в более новых форматах контейнеров, отсутствуют какие-либо метаданные и не поддерживается (по крайней мере официально) большинство используемых в наши дни ви- део-иаудиокодеков.ВпоследствииразныефирмыреализовывалидляформатаAVI поддержку того или иного кодека (как правило, доработанный вариант был несовместим с прочими кодеками). По сей день для таких популярных кодировщиков,

как MEncoder (http://www..mplayerhq..hu/DOCS/HTML/en/encoding-guide..html), по умол-

чанию используется AVI-контейнер.

Видеокодеки

«Смотреть видео» — значит воспринимать один видеопоток и один аудиопоток, связанные между собой. Но для этих потоков не предусмотрено двух отдельных файлов, а есть один «видеофайл», например, в формате AVI или MP4. Как вы узнали из предыдущего раздела, это всего лишь контейнеры, как формат ZIP, файлы которого способны содержать внутри множество разнообразных файлов. Медиаконтейнер определяет способ хранения видео- и аудиопотоков в едином файле.

В то время как пользователь «смотрит видео», его компьютер решает множество задач. Нужно сделать следующее.

1.Проинтерпретировать формат контейнера, найти доступные видео- и аудио­ дорожку, установить, как они хранятся в файле и, следовательно, в каком порядке нужно расшифровывать данные.

2.Декодируя видеопоток, представлять его в виде последовательности картинок на экране.

3.Декодируя аудиопоток, посылать необходимые звуки в динамики.

Видеокодек — это алгоритм кодировки видеопотока, то есть механизм решения задачи 2 из названных выше («кодек» — сокращение от слов «кодировщик» и «декодировщик»). Видеопроигрыватель расшифровывает видеопоток с помощью кодека, а затем отображает последовательность картинок (кадров) на экране. Большинство современных кодеков умеет разными способами снизить объем информации, необходимой для показа каждого следующего кадра. Есть, к примеру, такие, которые сохраняютнепокадровуюразвертку(последовательностьскриншотов),алишьотличия каждогоследующегокадраотпредыдущего.Посколькуоткадраккадрувидеоданные, как правило, меняются незначительно, таким способом можно достичь высокой степени сжатия — серьезно уменьшить размер файла.

Существует кодировка видео с потерями и без потерь. Видео, закодированное без потерь, занимает слишком много места и не может пригодиться в Сети, поэтому я сосредоточу свое внимание на кодеках, сжимающих с потерями. Сжатие с потерями означает, что при кодировке часть информации безвозвратно теряется. Кодировка видеоданных, как и, например, копирование аудиокассеты, влечет за собой потерю сведений об исходном видео и ухудшение качества. И если на аудио­ кассете, представляющей собой копию копии, возникает фоновый шум, то много раз перекодированное видео может выглядеть «блочным» (разбитым на квадратики), особенно в сценах, где много движения (так может быть и при кодировании качественного оригинала, если выбран плохой кодек или неправильно подобраны параметры). Впрочем, кодеки, сжимающие спотерями, замечательно умеют уменьшать объем, а некоторые даже позволяют «обмануть» человеческий глаз, отчего блочность, вызванная потерей информации, воспринимается не так резко.

Существует множество видеокодеков, из которых целям нашего рассмотрения отвечают три: H.264, Theora и VP8.