- •Как мы сюда попали?
- •Приступим
- •MIME-типы
- •Большое отступление о том, как появляются стандарты
- •Не отрывая карандаша
- •Все, что вы знаете об XHTML, — это ложь
- •Альтернативная точка зрения
- •WHAT? Что?!
- •И снова о W3C
- •Послесловие
- •Для дальнейшего изучения
- •Тестирование функций HTML5 в браузере
- •Приступим
- •Способы тестирования браузера
- •Modernizr: библиотека для тестирования HTML5-функций
- •Холст
- •Рисование текста
- •Видео
- •Форматы видео
- •Локальное хранилище
- •Фоновые вычисления
- •Офлайновые веб-приложения
- •Геолокация
- •Типы полей ввода
- •Подсказывающий текст
- •Автофокусировка в формах
- •Микроданные
- •Для дальнейшего изучения
- •Что все это значит?
- •Приступим
- •Определение типа документа
- •Корневой элемент
- •Элемент HEAD
- •Кодировка символов
- •Ссылочные отношения
- •Новые семантические элементы HTML5
- •Большое отступление о том, как браузеры обрабатывают незнакомые элементы
- •Верхние колонтитулы
- •Рубрикация
- •Дата и время
- •Навигация
- •Нижние колонтитулы
- •Для дальнейшего изучения
- •С чистого листа (холста)
- •Приступим
- •Простые фигуры
- •Координатная сетка холста
- •Контуры
- •Текст
- •Градиенты
- •Изображения
- •Живой пример
- •Для дальнейшего изучения
- •Видео в Сети
- •Приступим
- •Видеоконтейнеры
- •Видеокодеки
- •Theora
- •Аудиокодеки
- •MPEG-1 Audio Layer 3
- •Advanced Audio Coding
- •Vorbis
- •Что работает в Интернете?
- •Проблемы лицензирования видео H.264
- •Кодирование Ogg-видео с помощью Firefogg
- •Пакетное кодирование Ogg-видео с помощью ffmpeg2theora
- •Кодирование H.264-видео с помощью HandBrake
- •Пакетное кодирование H.264-видео с помощью HandBrake
- •Кодирование WebM-видео с помощью программы ffmpeg
- •…И наконец разметка
- •Живой пример
- •Для дальнейшего изучения
- •Вот мы вас и нашли!
- •Приступим
- •API геолокации
- •Покажите мне код
- •Обработка ошибок
- •Требую выбора!
- •На помощь спешит geo.js
- •Живой пример
- •Для дальнейшего изучения
- •Локальное хранилище: прошлое, настоящее, будущее
- •Приступим
- •Краткая история прототипов локального хранилища до HTML5
- •HTML5-хранилище: вводный курс
- •Использование HTML5-хранилища
- •Следим за состоянием HTML5-хранилища
- •Ограничения в современных браузерах
- •HTML5-хранилище в действии
- •Альтернативы: хранилище без ключей и значений
- •Для дальнейшего изучения
- •На волю, в офлайн!
- •Приступим
- •Манифест кэша
- •Раздел NETWORK
- •Раздел FALLBACK
- •Поток событий
- •«Убей меня поскорее!», или Отладка как одно из изящных искусств
- •Строим офлайновое приложение
- •Для дальнейшего изучения
- •Веб-формы как форма безумия
- •Приступим
- •Подсказывающий текст
- •Поля с автофокусировкой
- •Адреса электронной почты
- •Веб-адреса
- •Числа как счетчики
- •Числа как ползунки
- •Выборщики даты
- •Формы поиска
- •Выборщики цвета
- •И еще об одной вещи
- •Для дальнейшего изучения
- •Микроданные и другие красивые слова
- •Приступим
- •Что такое микроданные?
- •Структура микроданных
- •Разметка данных о человеке
- •Разметка данных об организации
- •Разметка данных о событии
- •Разметка клиентских отзывов
- •Для дальнейшего изучения
- •Приложение. Универсальный почти алфавитный определитель всего на свете
- •Элементы
- •Для дальнейшего изучения
104 |
Глава 5.. Видео в Сети |
размер,впишитежелаемоезначениездесь.Firefoggавтоматическиопределитзначениедругойкоординаты,прикоторомсохраняетсяисходноесоотношениесторон кадра, так что картинка вашего видеофайла не будет сжатой или растянутой.
Рис. 5.9. Базовые настройки качества и разрешения
На рис. 5.10 показано, как я вдвое уменьшил ширину исходного видео. Заметьте, что Firefogg автоматически подбирает нужную высоту.
После выставления всех настроек нажмите кнопку Encode to File (Закодировать в файл), чтобы запустить процесс кодирования (рис. 5.11). При этом Firefogg попросит ввести имя для закодированного файла.
ВовремякодированияFirefoggбудетпоказыватькрасивыйиндикатор(рис.5.12). Остается только ждать.
Пакетное кодирование Ogg-видео с помощью ffmpeg2theora
Существует несколько офлайновых программ-кодировщиков Ogg-видео. Если вам надо закодировать большое количество файлов и вы желаете автоматизировать процесс, обязательно воспользуйтесь программой ffmpeg2theora (http://v2v..cc/~j/ ffmpeg2theora/).
Пакетное кодирование Ogg-видео с помощью ffmpeg2theora |
105 |
Рис. 5.10. Выбор ширины и высоты кадра
Рис. 5.11. Запустим процесс кодирования
106 |
Глава 5.. Видео в Сети |
Рис. 5.12. Идет кодирование...
ffmpeg2theora — это программа для кодирования Ogg-видео с открытым исход ным кодом, распространяемая под лицензией GPL. Доступны готовые сборки для Mac OS X, Windows и современных дистрибутивов Linux. В качестве исходного при кодировании может выступать практически любой видеофайл, в том числе цифровое видео (DV), записываемое камерами потребительского уровня.
Чтобы начать работу с ffmpeg2theora, вызовите ее из командной строки. В Win dows это Главное меню Программы Стандартные Командная строка. В Mac OS X — Приложения Утилиты Терминал.
Программа ffmpeg2theora понимает много разных аргументов командной строки (флагов). Подробнее о них можно прочитать, вызвав ffmpeg2theora --help, я же сосредоточусь на трех аргументах.
--video-quality Q, где Q принимает числовые значения от 0 до 10.--audio-quality Q, где Q принимает числовые значения от –2 до 10.
--max_size W × H, где W и H — это соответственно максимальная ширина и высота кадра в видеофайлах, которые вы хотите получить на выходе (заметьте, что междупервымивторымчисламидолжнабытьнабраналатинскаябукваx,а некакойлибо другой символ). Программа ffmpeg2theora подберет размер, сохраняющий пропорции сторон, так что размеры кадра в выходном файле могут быть меньше,
Кодирование H..264-видео с помощью HandBrake |
107 |
чем W × H. Так, если при кодировании видео размерами 720 × 480 пикселов назна чить --max_size 320 × 240, то получится видеофайл с кадрами 320 пикселов шириной и 213 пикселов высотой.
Вот каким образом можно закодировать видео с теми же настройками, что и в предыдущем разделе:
you@localhost$ ffmpeg2theora --videoquality 5
--audioquality 1
--max_size 320x240 pr6.dv
Закодированный файл будет сохранен с расширением OGV в той же папке, что и исходное видео. Чтобы изменить это умолчание, надо передать ffmpeg2theora в командной строке аргумент вида --output=/путь_к_закодированному_файлу.
Кодирование H.264-видео с помощью HandBrake1
Если оставить в покое вопросы лицензирования (см. раздел «Проблемы лицензирования видео H.264» этой главы), то проще всего создавать H.264-видео с помощью программы HandBrake (http://handbrake..fr). HandBrake — это программа для кодирования H.264-видео с открытым исходным кодом, распространяемая под лицензией GPL (раньше она знала и другие видеоформаты, но в последней версии разработчики прекратили поддержку большинства из них, чтобы сосре- доточитьвсесвоиусилиянаH.264-видео).ДоступныготовыесборкидляMac OS X, Windows и современных дистрибутивов Linux (http://handbrake..fr/downloads..php).
HandBrake существует в двух формах: как приложение с графическим интерфейсом и утилита командной строки. Сначала я покажу вам графический интерфейс, а потом мы выясним, как найденные нами оптимальные установки превратить в последовательность команд терминала.
Открыв программу HandBrake, выберите исходный видеофайл (рис. 5.13). Щелкните на пункте Source (Источник) и, выбрав Video File (Видеофайл), найдите нужный файл. HandBrake может принимать в качестве исходного практически любой файл, в том числе цифровое видео (DV), записываемое камерами потребительского уровня.
HandBrake предупредит, что вы не выбрали папку, в которой бы по умолчанию сохранялись закодированные файлы (рис. 5.14). Можно оставить без внимания это предупреждение, а можно открыть окно настроек (пункт меню Tools (Инструменты)) и назначить директорию по умолчанию для результатов работы программы.
1Здесь термином «H.264 video» кратко обозначается видео H.264 базового профиля и аудио AAC профиля низкой сложности в контейнере MPEG-4. Safari, Adobe Flash, а также iPhone и устройства на платформе Google Android имеют встроенную поддержку этого сочетания кодеков с контейнером. — Примеч. авт.
108 |
Глава 5.. Видео в Сети |
Рис. 5.13. Выберем исходный видеофайл
Рис. 5.14. Проигнорируем предупреждение
Кодирование H..264-видео с помощью HandBrake |
109 |
Вправой части окна имеется список шаблонов. Если выбрать шаблон iPhone
&iPod Touch, как показано на рис. 5.15, то большинство нужных нам настроек будут выставлены автоматически. По умолчанию отключена важная настройка веб-оптимизации (флажок Web optimized). Если установить флажок, как показано на рис. 5.16, то метаданные файла будут организованы так, что пользователь сможет приступить к просмотру, не дожидаясь конца загрузки, которая будет тем временем продолжаться в фоновом режиме. Рекомендую всегда устанавливать этот флажок. На качество картинки и размер закодированного файла эта настройка не влияет, так что нет причин избегать ее.
Рис. 5.15. Выберем шаблон iPhone
На вкладке Picture (Картинка) (рис. 5.17) можно выбрать максимальную высоту и ширину кадров закодированного видеофайла. Чтобы программа HandBrake не растягивала и не сжимала кадры при обработке, следует выставить флажок Keep Aspect Ratio (Сохранить пропорции).
На вкладке Video (Видео), изображенной на рис. 5.18, представлено несколько важных настроек.
Video Codec (Видеокодек) — убедитесь, что выбрано значение H..264 (x264).
2-Pass Encoding (Кодирование в два прохода) — если установлен этот флажок, то HandBrake запустит кодирующий модуль дважды. В первый раз программа анализирует исходный видеофайл: сочетания цветов в нем, движение на экране,
110 |
Глава 5.. Видео в Сети |
разбивку на сцены. Второй проход — собственно кодирование, привлекающее информацию, которая была получена во время первого прохода. Как и следует ожидать, кодирование в два прохода будет примерно вдвое дольше по времени, зато на выходе получится файл лучшего качества без прироста в объеме. Я всегда выполняю кодирование H.264-видео в два прохода и советую делать вам то же самое, если, конечно, вы не строите второй YouTube и вам не приходится возиться с кодированием видео 24 часа в сутки.
Turbo first Pass (Первый проход в турборежиме) — при двухпроходной кодировке благодаря этой настройке можно сэкономить часть времени. Она уменьшает объем работы, выполняемой во время первого прохода кодировщика, что, однако, лишь немного снижает качество. Я обычно устанавливаю этот флажок, но если вы цените качество превыше всего, снимите флажок.
Quality (Качество) — качество кодируемого видео определяется несколькими способами.Можноуказатьжелаемыйобъемконечногофайла,итогдаHandBrake сделает все возможное, чтобы вместить итог своих трудов в заявленный объем. Как альтернативу можно указать средний битрейт, то есть буквально количество бит, приходящихся на одну секунду кодированного видео (о «среднем» битрейте говорят потому, что не все секунды требуют одинакового количества бит). Можно, наконец, выбрать постоянный коэффициент качества на шкале от 0 до 100 %. Чем выше процент, тем лучше качество и тем больше файл. Нельзя однозначно сказать, какой из настроек качества лучше пользоваться.
Рис. 5.16. Не забудем о веб-оптимизации
Кодирование H..264-видео с помощью HandBrake |
111 |
Рис. 5.17. Назначим горизонтальный и вертикальный размеры
Рис. 5.18. Настройки качества видео
112 |
Глава 5.. Видео в Сети |
|
|
Разметка в вопросах и ответах |
|
Вопрос: Можно ли кодировать Ogg-видео тоже в два |
определенной степени (возможно, вы заинтересованы |
прохода? |
именно в этом, но мой опыт свидетельствует о неце- |
Ответ: Да, но ввиду фундаментальных отличий в алгорит- |
лесообразности такой меры, да и лишнего времени на |
кодирование веб-видео тратить не стоит). Наилучшее |
|
ме кодирования это вряд ли необходимо. Кодирование |
качество Ogg-видео обеспечивают настройки качества |
H.264-видео в два прохода почти всегда повышает ка- |
видео, а о кодировании в два прохода беспокоиться не- |
чество картинки, тогда как двухпроходное кодирование |
зачем. |
Ogg-видео способно только снизить размер файла до |
|
|
|
В данном примере я установил средний битрейт 600 Кбит/с, что довольно много для видео с разрешением 320 × 240. Я разрешил кодирование в два прохода с первым проходом в турборежиме.
На вкладке Audio (Аудио), которую показывает рис. 5.19, вам вряд ли придется что-либо менять, кроме двух настроек. Во-первых, если исходный файл содержит несколько аудиодорожек, то, возможно, придется выбрать, какую из них оставить в закодированном файле. Во-вторых, если звуковое сопровождение вашего видео — это преимущественно речь людей, а не музыка и звуки окружающего мира, то бит рейт аудиодорожки можно понизить до 96 Кбит/с или около того. Прочие настройки, унаследованные из шаблона iPhone, оптимальны.
Рис. 5.19. Настройки качества аудио