Как вставлять видео в html
1.13. HTML5-видео
Раньше, если вы хотели добавить видео на веб-страницу, вам приходилось использовать элемент
| Атрибут | Описание, принимаемое значение |
|---|---|
| autoplay | Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы. |
| controls | Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость). |
| height | Задает высоту окна для отображения видеоданных, возможные значения: px или % |
| loop | Циклическое воспроизведение видеофайла. |
| muted | Выключает звук при воспроизведении видеофайла. |
| poster | URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла. |
| preload | Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики. none — отсутствие автоматической загрузки видеофайла. |
| src | Содержит абсолютный или относительный URL-адрес видеофайла. |
| width | Задает ширину окна для отображения видеоданных, возможные значения: px или % |
2. Встраиваемый интерактивный контент
Элемент определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью на веб-страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf :
3. Видеокодеки
При просмотре видео проигрыватель должен его декодировать. Одни проигрыватели используют программное декодирование видеопотока, другие используют аппаратное декодирование.
Важно! Поскольку каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео-контента во всех браузерах, видео-файл нужно размещать в нескольких форматах.
H.264 — высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения.
Ogg Theora — открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H.264.
VP8 — открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в Firefox, Chrome и Opera.
4. Видеоконтейнеры
Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие:
На данный момент браузеры поддерживают три основных видео формата:
| Формат | Видеокодек | Аудиокодек |
|---|---|---|
| .mp4 | H.264 | AAC |
| .ogg/.ogv | Theora | Vorbis |
| .webm | VP8 | Vorbis |
5. Альтернативные медиа-ресурсы
| Атрибут | Описание, принимаемое значение |
|---|---|
| media | Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл). |
| src | Содержит абсолютный или относительный URL-адрес медиафайла. |
| type | Определяет MIME-тип медиафайла. |
6. Добавление субтитров и заголовков
7. Пример: размещаем видео на сайте
Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя атрибуты для задания видео требуемых параметров:
Если вы хотите выровнять видеоплеер на странице, нужно обернуть элемент в контейнер
8. Видеоконвертеры
Movavi — позволяет конвертировать видео и аудио в необходимый вам формат. Сохраняет медиафайлы для проигрывания на мобильных устройствах. «Умные» готовые профили позволяют добиваться максимального качества.
ONLINE-CONVERT — бесплатный онлайн-конвертер, позволяющий конвертировать любые медиа-файлы из одного формата в другой.
Firefogg — модуль расширения для Firefox, может создавать видеофайлы Theora и WebM. Работает непосредственно в браузере, но вся работа выполняется локально без обращения к веб-серверу.
CloudConvert — онлайн-конвертер файлов. Поддерживает практически любой формат аудио, видео, документов, электронных книг, архивов, изображений, электронных таблиц или презентаций.
Видео на сайте
Перевод: Влад Мержевич
Любой, кто посещал YouTube.com за последние четыре года знает, что можно вставить видео на веб-страницу. До HTML5 не существовало стандартного способа сделать это, фактически, любое видео, что вы видели в Интернете, было добавлено через сторонние плагины вроде QuickTime, RealPlayer или Flash (на YouTube используется именно он). Эти плагины достаточно хорошо интегрированы с браузером, поэтому вы могли даже не знать, что их используете. Но это до тех пор, пока не попытаетесь посмотреть видео на платформе без поддержки плагина.
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| 9.0+ | 3.5+ | 3.0+ | 3.0+ | 10.5+ | 1.0+ | 2.0+ |
Поддержка в действительности лишь малая часть проблемы. Прежде, чем мы поговорим об HTML5-видео, вам в первую очередь необходимо понять о самом видео.
Контейнеры видео
Вы можете думать о видеофайлах как об «AVI» или «MP4». В действительности, «AVI» и «MP4» только форматы файлов. Подобно ZIP-архиву, в котором может храниться любой файл, видеоформаты определяют способ хранения, а не данные. В действительности все несколько сложнее из-за того, что потоковое видео не всегда совместимо с форматами контейнеров, но это пока не важно.
Видеофайл обычно содержит несколько дорожек — видеодорожка (без звука), а также одну или несколько звуковых дорожек (без видео). Дорожки, как правило, взаимосвязаны, звуковая дорожка содержит маркеры для синхронизации аудио с видео. Дополнительные дорожки могут содержать метаданные, такие как соотношение сторон видео или язык звуковой дорожки. Контейнеры также могут содержать метаданные, такие как название самого видео, обложку, номер эпизода (для сериалов) и др.
Существует много форматов контейнеров видео, вот некоторые самые популярные.
MPEG-4, обычно с расширением mp4 или m4v. MPEG-4 основан на старом контейнере Apple QuickTime (файлы с расширением mov). Трейлеры к фильмам на сайте Apple по-прежнему используют старый контейнер, но фильмы в iTunes поставляются в формате контейнера MPEG-4.
Flash-видео, обычно с расширением flv. Для Flash-видео используется Adobe Flash, что не удивительно. До Flash 9.0.60.184 (по-другому Flash Player 9 Update 3) поддерживался только контейнер в формате Flash. Поздние версии также поддерживают контейнер MPEG-4.
Ogg, обычно с расширением ogv. Ogg является открытым стандартом с открытым исходным кодом для пользователей, свободный от каких-либо патентов. Браузеры Firefox 3.5, Chrome 4 и Opera 10.5 имеют встроенную поддержку без специальных плагинов — контейнера Ogg, Ogg-видео (называемое «Theora») и Ogg-аудио (называемое «Vorbis»). Ogg поддерживается всеми основными дистрибутивами Linux, также можно использовать его на Mac и Windows установив соответственно компоненты QuickTime или фильтры DirectShow. Плеер VLC превосходно проигрывает Ogg-файлы на любой платформе.
WebM это новый формат контейнера, технически похожий на другой формат называемый Matroska. WebM был анонсирован в мае 2010 года и предназначен для использования исключительно с видеокодеком VP8 и аудиокодеком Vorbis. Встроенная поддержка без специальных плагинов имеется в браузерах Chromuim, Google Chrome, Mozilla Firefox и Opera. Компания Adobe объявила, что будущая версия Flash также будет поддерживать WebM-видео.
Audio Video Interleave, как правило, с расширением avi. Формат контейнера AVI был изобретен Майкрософт в то время, когда считалось удивительным, что компьютеры вообще могут проигрывать видео. Особенности последних форматов файлов вроде метаданных официально не поддерживаются. Также этот формат официально не поддерживает большинство используемых современных аудио и видеокодеков. Он является форматом по умолчанию для популярных кодировщиков вроде MEncoder.
Видеокодеки
Когда вы говорите о «просмотре видео», речь, вероятно, идет о сочетании одного потока видео и одного аудиопотока. Но у вас нет двух разных файлов, есть «видео». Это может быть AVI-файл или MP4-файл, который всего лишь формат контейнера наподобие ZIP-архива, содержащего внутри себя несколько видов файлов. Формат контейнера определяет, как хранить видео и аудиопотоки в одном файле.
Когда вы смотрите видео, ваш плеер делает три вещи одновременно:
Видеокодек это алгоритм, по которому кодируется видеопоток, он указывает, как сделать пункт 2 из списка выше. Слово «кодек» происходит от сочетания слов «кодер» и «декодер». Ваш видеоплеер декодирует видеопоток в зависимости от видеокодека, а затем отображает серию изображений или «кадров» на экране. Большинство современных видеокодеков использует всевозможные уловки для минимизации объема информации необходимого для отображения следующего кадра. Например, вместо хранения каждого отдельного кадра они будут хранить только различия между кадрами. Большинство видео на самом деле не изменяется целиком при переходе от одного кадра к другому, что позволяет хорошо сжимать данные, в результате получаются файлы меньшего размера.
Существуют видеокодеки с потерей данных и без потерь. Видео без потерь слишком большое, чтобы быть полезным в Интернете, поэтому я сконцентрируюсь на видео с потерями. Видеокодек с потерей означает, что информация во время кодирования безвозвратно утеряна. Это похоже на копирование аудиокассеты, вы теряете информацию об исходном видео и получаете ухудшения качества каждый раз, когда кодируете. Вместо «свиста» аудиокассеты пере-пере-перекодированное видео может выглядеть как набор блоков, особенно в сценах с движением. На самом деле это может произойти даже при кодировании из первоисточника, если вы выбрали плохой кодек или указали неверные параметры. Хорошей стороной видеокодеков с потерями является удивительное сглаживание блоков во время воспроизведения, что делает потери менее заметными для глаза человека.
Есть куча видеокодеков. Три наиболее подходящих это H.264, Theora и VP8.
H.264 также известен как «MPEG-4 Part 10» или «MPEG-4 AVC» или «MPEG-4 Advanced Video Coding». H.264 был разработан группой MPEG и стандартизирован в 2003 году. Целью разработки было создание единого кодека для устройств от сотовых телефонов до современных настольных компьютеров. Для этого в стандарте H.264 имеются профили, для каждого из которых определены дополнительные возможности влияющих на размер файла. Высшие профили используют несколько дополнительных функций, предлагают лучшее визуальное качество при меньших размерах файлов, но занимают больше времени для кодирования и требует больше ресурсов процессора для декодирования в реальном времени.
Чтобы дать вам примерное представление об ассортименте профилей, iPhone от Apple поддерживает Базовый профиль (Baseline), приставка AppleTV поддерживает Базовый и Основной профили (Main), Adobe Flash на настольных компьютерах поддерживает Базовый, Основной и Высший профиль (High). YouTube использует H.264 для кодирования видео высокого разрешения, воспроизводимого через Adobe Flash; YouTube также предоставляет H.264-кодированное видео на мобильные устройства, включая iPhone от Apple и телефоны с операционной системой Android. Кроме того, H.264 является одним из видеокодеков, предусмотренных спецификацией Blu-Ray. Диски Blu-Ray используют в основном Высший профиль.
Большинство некомпьютерных устройств воспроизводящих H.264-видео (включая iPhone и бытовые Blu-Ray-проигрыватели) декодируют с помощью специального чипа, поскольку их основные процессоры не настолько мощны, чтобы декодировать видео в режиме реального времени. В наши дни даже бюджетные видеокарты имеют аппаратную поддержку декодирования H.264.
Есть конкурирующие с H.264 кодеки, включая библиотеку с открытым кодом x264. Стандарт H.264 основан на патенте, лицензирование происходит посредством группы MPEG LA.
H.264 может быть вложен в наиболее популярные форматы видео, включая MP4 (используется в основном в магазине iTunes компании Apple) и MKV (используется в основном энтузиастами видео).
Theora
Theora эволюционировал из кодека VP3 и был разработан Фондом Xiph.org. Theora свободный от отчисления кодек и не связан никакими известными патентами кроме оригинальных VP3-патентов, которые были лицензированы безвозмездно. Хотя стандарт был «заморожен» с 2004 года, проект Theora (включающий в себя кодер с открытым исходным кодом и декодер) выпустил версию 1.0 в ноябре 2008 года и версию 1.1 в сентябре 2009 года.
Видео Theora может быть встроено в любой формат файла, хотя чаще всего встречается в контейнере Ogg. Все основные дистрибутивы Linux поддерживают Theora из коробки, Mozilla Firefox 3.5 включает в себя встроенную поддержку видео Theora в контейнере Ogg. Вы также можете воспроизводить видео Theora в Windows или в Mac OS X после установки открытого программного обеспечения Xiph.org.
VP8 другой видеокодек от On2, той же компании, что первоначально разработала VP3 (позднее Theora). Технически по качеству он похож на базовый H.264 с большим потенциалом для будущих улучшений.
В 2010 году Google приобрел On2 и опубликовал спецификацию кодека и примеры как открытое программное обеспечение. В рамках этого Google также «открыл» все патенты которые On2 зарегистрировала на VP8 и сделал их свободными от отчислений. Это лучшее, на что можно надеяться с патентами. Вы не можете на самом деле «освободить» их или свести на нет после того как они были выпущены. Чтобы сделать их открытыми для пользователей у вас должна быть лицензия без отчислений, после чего каждый может использовать технологию, ничего не платя и без заключения лицензионного соглашения. По состоянию на 19 мая 2010 года, VP8 является свободным от отчислений, современным кодеком не связанным никакими известными патентами кроме тех патентов, что On2 (в настоящее время Google) уже лицензировали безвозмездно.
Аудиокодеки
Если вы собираетесь смотреть фильмы, снятые после 1927 года, то захотите звуковую дорожку. Подобно видеокодеку, аудиокодек это алгоритм, по которому кодируется аудиопоток. Подобно видеокодеку они делятся на аудиокодеки с потерями и без. И аналогично видео без потерь, аудио без потерь слишком большое, чтобы выкладывать его в Интернет. Так что я сконцентрируюсь на аудиокодеках с потерями.
На самом деле, их не так и много, потому что есть разные категории кодеков с потерями. Аудио используется в тех местах, где нет видео (телефония, например), также существует категория аудиокодеков оптимизированных для кодирования речи. Вам не удалось бы конвертировать музыкальный компакт-диск с этими кодеками, поскольку результат бы звучал как пение четырехлетнего ребенка. Из-за отсутствия поддержки в браузерах и сторонних плагинов, кодеки для оптимизации речи никогда не используются в Интернете. Так что я сконцентрируюсь на общих аудиокодеках.
Как я уже упоминал выше, когда вы «смотрите видео», компьютер делает, по крайней мере, три вещи одновременно:
Аудиокодек отвечает за пункт 3 — декодирование аудиопотока и его преобразование в цифровые сигналы, которые динамики затем превращают в звук. Как и у видеокодеков имеются разные уловки для уменьшения объема информации хранящейся в звуковом потоке.
И так как мы говорим о кодеках с потерями, информация теряется во время цикла запись → кодирование → декодирование → прослушивание. Различные аудиокодеки отбрасывают разные вещи, но у них всех одна цель: обмануть ваши уши — сделать так, чтобы вы не замечали пропавших частей.
Отличие аудио от видео в каналах. Мы отправляем звук на колонки, так? Ну, как много у вас колонок? Если вы сидите за компьютером, то скорее всего имеете только две: одну слева и одну справа. На моем столе три: слева, справа и еще одна на полу. Системы называемые «звук вокруг» могут иметь шесть или более динамиков стратегически расположенных по всей комнате. Каждый динамик получает свой канал исходной записи. В теории вы можете сидеть в середине шести динамиков, буквально окруженный шестью раздельными каналами звука и ваш мозг будет вызывать чувство, что вы находитесь в центре событий. Это возможно? Индустрия в несколько миллиардов долларов думает что да.
Большинство общих аудиокодеков могут работать с двумя каналами звука. Во время записи звук разделяется на левый и правый каналы, во время кодирования оба канала хранятся в том же звуковом потоке, во время декодирования оба канала декодируются и каждый из них направляется в соответствующий динамик. Некоторые аудиокодеки могут обрабатывать более двух каналов, они отслеживают каждый канал, чтобы плеер посылал правильный звук на правильный динамик.
Есть много аудиокодеков. Я говорил, что много видеокодеков? Забудьте. Есть уйма и уйма аудиокодеков, но в Интернете вам надо знать только об MP3, AAC и Vorbis.
MPEG-1 Audio Layer 3
MPEG-1 Audio Layer 3 известен как «MP3». Если вы ничего не слышали об MP3, то я не знаю что с вами делать. Интернет-магазины продают портативные музыкальные плееры и называют их «MP3-плееры». Вот так.
MP3 может содержать до двух каналов звука, которые могут быть закодированы с различным битрейтом: 64 кбит/с, 128 кбит/с, 192 кбит/с и множество других от 32 до 320. Более высокий битрейт означает больший размер файлов и лучшее качество звука, хотя отношение битрейта к качеству звука не является линейным. 128 кбит/с звучит более чем в два раза лучше, чем 64 кбит/с, но 256 кбит/с не звучит в два раза лучше, чем 128 кбит/с. Кроме того, формат MP3 позволяет делать переменный битрейт, это означает что некоторые части кодированного потока сжаты больше других. Например, тишина может быть закодирована с низким битрейтом, затем мгновение спустя битрейт может подскочить, когда начнут играть несколько инструментов. MP3 также может быть закодирован с постоянным битрейтом.
Стандарт MP3 не определяет как именно кодировать MP3 (хотя он точно определяет как его декодировать), различные кодировщики используют разные психоакустические модели, которые дают широкий разброс результатов. Открытый проект LAME это лучший бесплатный кодировщик, за исключением самых низких битрейтов.
Формат MP3 (стандартизован в 1991) запатентован, что объясняет, почему Linux при установке из коробки не может проигрывать MP3-файлы. Почти каждый портативный музыкальный плеер поддерживает стандартные файлы MP3, аудиопоток в MP3 может быть встроен в любой видеоконтейнер. Adobe Flash может играть и стандартные файлы MP3 и аудиопотоки MP3 в контейнере MP4-видео.
Advanced Audio Coding
Advanced Audio Coding более известен как «AAC». Стандартизированный в 1997 году, он стал известным, когда Apple выбрал его в качестве основного формата для магазина iTunes.
Первоначально все AAC-файлы из магазина iTunes были зашифрованы фирменной DRM- схемой от Apple называемой FairPlay. Избранные песни в iTunes теперь доступны как незащищенные AAC-файлы, их Apple называет «iTunes Плюс», потому что это звучит гораздо лучше, чем название «iTunes минус». Формат AAC запатентован, лицензионное соглашение доступно в Интернете.
AAC был разработан, чтобы обеспечить лучшее качество звука чем MP3 при том же битрейте, и он может кодировать аудио в любой битрейт. MP3 ограничен фиксированным числом битрейтом с верхней границей 320 кбит/с. AAC может кодировать до 48 каналов звука, хотя на практике этого никто не делает. Формат AAC также отличается от MP3 заданием нескольких профилей, пойдя тем же путем что и H.264. Профиль «Низкая сложность» предназначен для воспроизведения в реальном времени на устройствах с ограниченной мощностью процессора, в то время как высшие профили предлагают лучшее качество звука при том же битрейте за счет более медленного кодирования и декодирования.
Все современные продукты Apple, включая iPod, AppleTV, QuickTime поддерживают определенные профили AAC в стандартных аудиофайлах и аудиопотоках в видеоконтейнере MP4. Adobe Flash поддерживает все профили в формате AAC в MP4.
Vorbis
Vorbis часто называют «Ogg Vorbis» хотя это технически неверно — «Ogg» это формат контейнера, а Vorbis аудиопоток, который может быть встроен в другие контейнеры. Vorbis не обременен никакими известными патентами и, следовательно, поддерживается всеми основными дистрибутивами Linux и портативными устройствами. Mozilla Firefox 3.5 поддерживает Vorbis-аудио в контейнере Ogg или Ogg-видео с аудиодорожкой Vorbis. Мобильные телефоны на Android также могут воспроизводить стандартные аудиофайлы Vorbis. Аудиопоток Vorbis, как правило, встроен в контейнер Ogg или WebM, но он также может быть встроен в контейнер MP4 или MKV (а также с некоторыми хитростями в AVI). Vorbis поддерживает произвольное количество звуковых каналов.
Существуют свободные кодеры и декодеры Vorbis, в том числе OggConvert (кодер), FFmpeg (декодер), aoTuV (кодер) и libvorbis (декодер). Есть также компоненты QuickTime для Mac OS X и фильтры DirectShow для Windows.
Что работает на странице
Если ваши глаза еще окончательно не выпали, они у вас лучше, чем у большинства других. Как вы могли заметить, видео (и аудио) сложная тема, а ведь это еще был сокращенный вариант! Я уверен, вам интересно как это все относится к HTML5. Итак, HTML5 включает элемент для встраивания видео на веб-страницу. Нет никаких ограничений на видеокодек, аудиокодек или формат файла, которые вы можете использовать для вашего видео. Один элемент может содержать ссылки на несколько файлов, браузер же выберет первый файл, который он сможет воспроизвести. Это способ узнать, как браузеры поддерживают разные контейнеры и кодеки.
На момент написания статьи распространено следующее HTML5-видео.
Нагляднее представить все в виде таблицы.
| Кодек/контейнер | IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| Theora+Vorbis+Ogg | – | 3.5+ | † | 5.0+ | 10.5+ | – | – |
| H.264+AAC+MP4 | – | – | 3.0+ | 5.0+ | – | 3.0+ | 2.0+ |
| WebM | – | – | † | 6.0+ | 10.6+ | – | – |
Через год ситуация существенно изменится, поскольку WebM встроен в разные браузеры и пользователи обновят свои программы до новых версий.
| Кодек/контейнер | IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| Theora+Vorbis+Ogg | – | 3.5+ | † | 5.0+ | 10.5+ | – | – |
| H.264+AAC+MP4 | 9.0+ | – | 3.0+ | 5.0+ | – | 3.0+ | 2.0+ |
| WebM | 9.0+* | 4.0+ | † | 6.0+ | 10.6+ | – | ‡ |
* Internet Explorer 9 будет поддерживать WebM только если пользователь установил VP8 кодек.
† Safari воспроизводит все, что может играть QuickTime, но он работает только со встроенной комбинацией H.264/AAC/MP4.
‡ Google взял на себя обязательство поддержки WebM «в будущих версиях» Android, но конкретно никаких сроков не назвал.
Профессор Маркап говорит
Нет единой комбинации контейнеров и кодеков, которая работает во всех HTML5-браузерах. И эта ситуация вряд ли изменится в ближайшем будущем.
Чтобы ваше видео можно было смотреть на всех устройствах и платформах, придется кодировать видео несколько раз.
Для обеспечения максимальной совместимости рабочий процесс с вашим видео будет следующим.
Вопросы лицензирования видео H.264
Прежде чем мы продолжим, я должен отметить, что стоимость кодирования видео оплачивается дважды. Так, есть очевидная стоимость, когда вы хотите кодировать видео дважды, тогда требуется больше компьютеров и времени, чем для одного раза. Но есть и другая стоимость связанная с видео H.264 — это затраты на лицензирование.
MPEG LA разделяет лицензию H.264 на две сублицензии: одну для производителей кодеров или декодеров, а другую для поставщиков.
Сублицензия для поставщиков разделяется на четыре основных подкатегории, две из которых (подписка и платное использование) связаны с тем, что конечный пользователь непосредственно платит за видео сервисы, а еще две («бесплатное» телевидение и интернет-трансляция) связаны с вознаграждением из других источников, а не от зрителя.
Второй лицензионный платеж это плата за ежегодное вещание, которая зависит от размеров аудитории:
Как я упоминал ранее, плата за участие применяется к любому способу доставки контента. После определения, что «свободное» телевидение означает больше, чем обычное (по воздуху), MPEG LA установил частичную плату за интернет-вещание, так как «видео, которое поставляется через Интернет по всему миру, не оплачивается конечным пользователем за право на передачу или просмотр». Другими словами, любое вещание, является ли оно обычным, кабельным, спутниковым или через Интернет подлежит оплате.
Сборы потенциально несколько выше для интернет-трансляций, предполагая, что доступ через Интернет будет расти гораздо быстрее, чем традиционное или «свободное» телевидение, такое как кабельное или спутниковое. Добавляя «бесплатное телевидение» в рынок вещания вместе с дополнительной оплатой, MPEG LA гарантирует отсрочку в течение первого срока лицензии, который заканчивается 31 декабря 2010 года, и отмечает, что «после первого срока роялти должен быть не более, чем экономический эквивалент лицензионного платежа в течение того же времени для свободного телевидения.
В последнюю часть — о структуре платы для интернет-трансляций — уже были внесены поправки. MPEG-LA недавно объявила, что для потокового вещания не потребуется отчислений. Это не означает что H.264 является безвозмездным для всех пользователей. В частности, кодеры (подобные тому, что обрабатывает видео, выложенное на YouTube) и декодеры (как включенный в браузер Google Chrome) все еще являются предметом лицензионных сборов. Смотрите Free as in smokescreen для получения дополнительной информации.
Наконец разметка
Я вполне уверен, что это должна быть книга по HTML. Тогда где разметка?
Вот пример видео, которое начинает загрузку (но не воспроизведение), как только загрузится страница.
А вот пример видео, которое не будет загружаться при загрузке страницы.
Вот пример видео, которое начнет загружаться и играть сразу же после загрузки страницы.
А вот скрипт Greasemonkey, который можно установить в вашей локальной копии Firefox для предотвращения автоматического воспроизведения HTML5-видео. Он использует DOM-атрибут autoplay определенный в HTML5 и эквивалентный атрибуту autoplay в коде HTML.
source src=»http://htmlbook.ru/html5/pr6.mp4″ type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘>
source src=»http://htmlbook.ru/html5/pr6.webm» type=’video/webm; codecs=»vp8, vorbis»‘>
source src=»http://htmlbook.ru/html5/pr6.ogv» type=’video/ogg; codecs=»theora, vorbis»‘>
type=’video/ogg; codecs=»theora, vorbis»‘ >
type=’video/webm; codecs=»vp8, vorbis»‘ >
type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘ >
Преимуществом всех этих сложностей является то, что браузер проверяет атрибут type первым и смотрит, может ли он воспроизвести видеофайл. Если браузер решает, что он не может этого сделать, то не будет скачивать файл даже частично. Вы сэкономите на пропускной способности, а ваши посетители увидят видео, за которым они пришли, быстрее.
Если вы будете следовать инструкциям этой главы при кодировании видео, то можете просто скопировать и вставить значения атрибута type из примеров. В противном случае, вам нужно выработать параметры type для себя.
Профессор Маркап говорит
На момент написания (20 мая 2010 года), iPad содержит ошибку, из-за которой он не замечает ничего, кроме первого источника видео в списке. К сожалению, это означает, что вы должны указать ваш MP4-файл первым, а затем остальные видеоформаты. Эх.
MIME-типы
Неправильно настроенный веб-сервер может привести к бесконечным разочарованиям, почему это ваши видео идут на локальном компьютере, но не воспроизводятся на рабочем сайте. Если вы столкнулись с этой проблемой, то причина вероятнее всего в MIME-типах.
Я уже упоминал про MIME-типы ранее, но вы, вероятно, прозевали и не оценили их значение. Так вот большими буквами.
Профессор Маркап говорит
ВИДЕОФАЙЛЫ ДОЛЖНЫ БЫТЬ СОПОСТАВЛЕНЫ С СООТВЕТСТВУЮЩИМ MIME-ТИПОМ!
Первая строка предназначена для видео в контейнере Ogg. Вторая строка для видео в контейнере MPEG-4. Третья для WebM. Установите это один раз и забудьте. Если вы не указали эти директивы, ваше видео может не играть в некоторых браузерах, даже если включены MIME-типы в атрибуте type вашего HTML-кода.
Для суровых подробностей по настройке веб-сервера, я обращаю ваше внимание на эту прекрасную статью в Mozilla Developer Center: Configuring servers for Ogg media. Советы в этой статье также относятся к видео MP4 и WebM.
Что насчет IE?
Но как насчет более старых версий Internet Explorer до IE8 включительно? У большинства людей, которые используют Internet Explorer также установлен плагин Adobe Flash. Современные версии Adobe Flash (начиная с 9.0.60.184) поддерживают видео H.264 и аудио AAC в формате контейнера MPEG-4, как Safari и iPhone. После того как вы кодировали видео H.264 для Safari, вы можете проиграть его во Flash-плеере, если обнаружится что у одного из посетителей не HTML5-браузер.