Кодек html5: О поддержке HTML5 видео в современных браузерах / Хабр

О поддержке HTML5 видео в современных браузерах / Хабр

Свершилось то, чего многие ожидали — крупнейшие видеосервисы (YouTube, Vimeo) предоставили в режиме бета-тестирования возможность воспроизводить ролики средствами HTML5. Казалось бы, всё прекрасно, и Flash-у пора уйти на заслуженный покой. Ан нет — оказалось всё не так гладко.

А разгадка одна — кодеки. Разработчики браузеров и поставщики контента не сошлись во мнении, какой кодек для видео использовать. На самом деле, эта проблема обсуждалась и ранее, и консенсуса по ней так и нет. В итоге из черновой спецификации HTML5 были удалены упоминания о конкретном кодеке.

Кодеки

На звание кодека для HTML5 video в данный момент претендуют два кодека — Ogg Theora и H.264.

Ogg Theora

В основе Ogg Theora лежит кодек VP3, разработанный On2 Technologies. В 2002 году, On2 Technologies передали код VP3 под свободной BSD-подобной лицензией в руки Xiph.

org Foundation, а также отказались от патентов на кодек (технически, не отказались, а просто передали право их использовать всем, но это по сути то же самое). С тех пор, Xiph.org продолжает развитие этого кодека.

Использовать Ogg Theora можно везде, всегда, без лицензионных или патентных отчислений.

H.264

H.264 — это лицензируемый стандарт сжатия видео. Его использование требует платы в странах, где действует патенты на него (в первую очередь, это США). Однако, на сегодняшний день, это один из самых лучших способов сжимать видео. Именно H.264 является стандартом де-факто сжатия HD-видео, к примеру. H.264 заметно эффективнее Ogg Theora по соотношению качество/битрейт.

Если кратко, H.264 — лучше, но даже его open-source реализации не могут быть использованы свободно в странах, где действуют патенты на него.

Реализации в современных браузерах

Здесь я упоминаю только те браузеры, в которых HTML5 video работает уже сейчас.

Mozilla Firefox

Реализация использует библиотеку liboggplay, а это означает, что могут использоваться только Ogg Theora для видео и Ogg Vorbis для аудио. Т.е. кодек фиксирован, и чтобы сделать поддержку чего-то ещё, нужно по сути переписать реализацию.

Google Chrome

Реализация использует статически привязанный ffmpeg. ffmpeg поддерживает кучу разных кодеков, включая и Ogg Theora, и H.264, и вообще практически всё, что сейчас реально используется.

К слову, ffmpeg в данный момент используется почти повсеместно — например, в CCCP и K-Lite Codec Pack, а также в mplayer и VLC используется именно ffmpeg.

Казалось бы, всё замечательно. Но! ffmpeg, хоть и open source, не может быть свободным в США. Для распространения программы, использующей ffmpeg, нужно платить отчисления. Google себе это может позволить, и имеет право выпускать билды со встроенным ffmpeg. Но совсем не такая ситуация с дистрибутивами Linux.

Те из них, что выпускаются в США, не смогут включить в свои репозитории Chrome с поддержкой ffmpeg, так как это потребует платы отчислений. В первую очередь это касается такого небезызвестного дистрибутива, как Fedora.

Safari

Использует фреймворк QuickTime, что позволяет воспроизводить что угодно, если установлен соответствующий QuickTime-кодек.

Наверное, из современных реализаций эта наиболее правильная, т.к. имеет модульную архитектуру изначально. Но это всё сильно завязано на Mac OS, поэтому к остальным системам и браузерам неприменимо.

Суровая реальность

Теперь поговорим о поставщиках контента. Свобода

, равенство, братство

— это всё хорошо в теории, но на практике вопрос решается небольшими зеленоватыми бумажками с портретами американских президентов. Google-у как-то проще заплатить за лицензию на более эффективный кодек, чем платить больше за трафик, и место на серверах. Мало того, учитывая то, что у них и так всё видео хранится в H.264, было бы особенно глупо (с точки зрения бизнеса, естественно), перекодировать это всё в Ogg Theora. Так что решение использовать H.264 — это абсолютная, экономически оправданная, жизненная необходимость. YouTube не станет использовать Ogg Theora. Не выгодно. Точка.

А мало того, использование H.264 выгоднее и нам, конечным пользователям. Мы же не платим лицензионные отчисления, а, тем не менее, получаем лучшее качество видео при меньшем количестве загруженных данных (привет жителям не-столиц с хилыми каналами в интернеты).

Всё плохо?

Сейчас — да. Но! Есть выход. Для декодирования видео в браузере нужно использовать модульный подход, не привязываясь к определённому кодеку. Мало того, в каждой операционной системе уже и так есть модульная инфраструктура кодеков. В Windows — это DirectShow, в Mac OS X — это QuickTime, в Linux — это gstreamer. А gstreamer ещё и кроссплатформенный, между прочим, и уже используется в кроссплатформенных программах, к примеру, Songbird для воспроизведения музыки использует именно gstreamer на всех платформах.

Использование gstreamer решит все проблемы с кодеками в браузерах один раз и навсегда. В частности, не будет никаких проблем с патентами, так как браузер будет распространятся без защищённых патентами кодеков, но на системе пользователя он сможет найти установленный плагин для этого кодека, и использовать его.

А мало того, в gstreamer предусмотрена возможность использовать кодеки, установленные в родном для данной системы фреймворке (для Windows — DirectShow, для Mac OS — QuickTime).

Светлое будущее, наступит ли оно?

Mozilla Firefox

Собственно, вот. Но, судя по комментариям там, сейчас такая интеграция планируется только для Fennec. Честно говоря, я искренее недоумеваю по этому поводу. Поддержка H.264 для Firefox нужна, и быстро, иначе есть большой риск остаться за бортом.

Я не знаю, как довести до разработчиков Firefox мысль о том, что модульная архитектура необходима прямо сейчас. Всё, что пришло в голову — проголосовать за этот баг, и оставить отзыв о неработающем веб-сайте (Help — Report Broken Web Site.

..) по адресу youtube.com/html5 со ссылкой на этот баг.

Google Chrome

Беда. Я пытался вникнуть в причину отказа, но она мне показалось не слишком веской. В принципе, тут нечего добавить. Можно почитать обсуждение, оно довольно жаркое. Ещё можно проголосовать за этот баг (отметить звёздочкой). Мало ли…

Opera

Внезапно, маленькая, но очень упорная, норвежская компания показывает себя с очень хорошей стороны. Читаем, радуемся.

Другие браузеры

Неповоротливые гиганты легко могут оказаться позади маленьких, почти не используемых в широких массах браузеров, таких как Epiphany, Midori, Aurora. Все они используют WebKit. Epiphany и Midori используют GtkWebKit, в нём планируется (или уже сделана) поддержка HTML5 video через gstreamer. Aurora использует QtWebKit, в нём для HTML5 планируется (или уже частично сделано) использование Phonon, который, с свою очередь, может использовать разные бэкэнды, в том числе и gstreamer.

Однако, на текущий момент, ни в одном из них работающей поддержки HTML5 нет. Остаётся верить в их скорое светлое будущее, ведь оно вполне реально.

Вместо послесловия

Искренне надеюсь, что именно 2010 год станет годом смерти Flash, и триумфа HTML5.

Как выбрать формат для публикации с iSpring

Главная задача, которую решают средства разработки iSpring, — публикация презентации или курса PowerPoint в веб-формат. В статье рассмотрим особенности форматов для конвертирования, которые предлагают инструменты iSpring.

Чтобы открыть окно настроек публикации, нужно нажать на кнопку Публикация на вкладке iSpring на панели инструментов PowerPoint.

Окно Опубликовать презентацию – вариант публикации Web – вкладка Главная – поле Режим конвертирования

Усовершенствованная технология конвертирования iSpring позволяет создавать одинаковые версии презентации в формате Flash или HTML5. Презентации HTML5 воспроизводятся так же, как и Flash во всех популярных браузерах:

• Internet Explorer (начиная с 9-ой версии)
• Google Chrome
• Mozilla Firefox

Однако, существуют некоторые функциональные различия между этими форматами. Давайте рассмотрим подробнее.

Для мобильных (HTML5)

HTML5 – современная технология для проигрывания мультимедийного контента на мобильных устройствах и новых версиях десктопных браузерах. Другими словами, презентация конвертируется в веб-страницу, которая поддерживает поведение исходной презентации.

Презентация не сохраняется в виде одного файла, поэтому необходимо иметь FTP-сервер или аккаунт iSpring Cloud, чтобы поделиться ей.

Публикуя презентации в HTML5, вы можете использовать опцию Запускать в iSpring Viewer. Мобильное приложение позволяет просматривать презентации оффлайн на iPad, iPhone или Android-устройствах.

Преимущества

• Кроссплатформенная поддержка
• Поддержка Секции 508. Программы для чтения с экрана компьютера (например, Jaws) воспроизведут материалы слайда и элементы плеера.
• Простота индексирования всех слайдов в HTML5 для Google робота
• Открытая технология, спецификации легко доступны разработчикам
• Оптимизированный размер готового файла (по сравнению с конвертацией в универсальный формат)
• Никаких проблем с настройками защиты, которые могут блокировать гиперссылки

Недостатки

• Несовместимость со старыми версиями браузеров (IE8, IE7)
• Труднее поделиться, так как презентация не сохраняется в один файл (проблема решается с помощью облачного сервиса iSpring Cloud)
• Уровень безопасности ниже, чем для одного зашифрованного .swf файла (для повышения безопасности возможна установка ограничений по домену)
• Некоторые различия в шрифтах и расположении элементов при просмотре в различных браузерах (проблема отсутствует при конвертации во Flash, так как он передается тем же плагином во всех браузерах)

При запуске HTML5 презентации в IE7 или IE8 появится следующее сообщение:

Расширенные настройки HTML5

При выборе режима конвертирования с форматом HTML5 — Для мобильных/Универсальный, на вкладке Расширенные станут доступны дополнительные настройки – опция Расширенная совместимость.

Если вы выберете эту опцию, все аудио и видеозаписи в презентации будут сохранены в 2 дополнительных веб-формата (.ogg и .webm) для совместимости с браузерами Firefox и Opera.

	Исходный	Дополнительный (совместимый)
Формат аудио	.mp3	.ogg
Формат видео	.mp4 (H.264 codec)	.webm
Браузер	IE9, Chrome, Safari, Firefox, Opera (new)	Firefox, Opera

Поддержка HTML5 элементов и медиа кодеков постоянно меняется во всех браузерах. Сегодня большинство веб-браузеров уже поддерживают форматы файлов .mp3 и .mp4 для аудио и видео.

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

Рекомендуем устанавливать эту опцию, если кто-то из ваших пользователей может использовать старые версии браузера Opera. Согласно сайту w3schools.com Opera поддерживает .mp4 видео начиная с версии 25.

Читайте больше на эту тему:

https://www.w3schools.com/html/html5_video.asp

https://www.w3schools.com/html/html5_audio.asp

https://html5doctor.com/multimedia-troubleshooting/

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

Internet Explorer 8 не поддерживает HTML5

Ранние версии стандартного веб-браузера Windows Internet Explorer, например IE6/7/8, не поддерживают HTML5.

Конечно, в 2009 году стандарт HTML5 еще не был установлен, и Flash являлся единственной опцией. Однако, уже в 2012, мировой консорциум представил спецификацию HTML5.

Фактически, Internet Explorer 8 – это единственная причина, почему публикация во Flash все еще может пригодиться.

Для компьютера (Flash)

Формат Flash (.swf) отлично подходит для воспроизведения на десктопных ПК и устаревших браузерах вроде Internet Explorer 8. Он предоставляет чуть более качественное визуальное отображение на компьютерах, чем HTML5. Также, режим конвертирования обладает опцией Один Flash файл, которая публикует всю презентацию в один .swf файл. Эта функция является огромным преимуществом iSpring перед другими средствам разработки, которые не позволяют сохранить курс в один файл.

К сожалению, Flash теряет свою популярность. Читайте статью «Flash уже не тот», чтобы узнать больше о трендах в IT-мире.

Рекомендуем эту опцию для авторов контента, которые разрабатывают курсы для прохождения только на компьютерах и ноутбуках.

Преимущества

• Все в одном flash файле. Всегда легче поделиться одним файлом, чем целой папкой
• Совместимость со старыми браузерами (IE7, IE8)
• Чуть лучшее качество отображения на компьютерах
• Более высокий уровень защиты

Недостатки

• Нет поддержки мобильных устройств
• Не поддерживается Секция 508, материалы во flash не совместимы с программами для чтения с экрана компьютера (например, Jaws)
• Более сложный процесс индексирования текста из .swf файла для Google роботов
• Flash плагин может быть внезапно заблокирован браузерами из соображений безопасности и степени защищенности
• Глобальные настройки безопасности для Flash Player блокируют внешние связи, когда .swf файл сохраняется и загружается с локального компьютера
• Защищенная технология. Разработчики не могут увидеть спецификации для всех настроек Flash

Adobe Flash блокирует все гиперссылки в вашей презентации

В первую очередь Flash был разработан для интернет-использования. Поэтому он имеет строгие настройки безопасности для использования оффлайн и блокирует все внешние взаимодействия (например, гиперссылки, отправка результатов теста по email, Java скрипты). Выполните глобальные настройки безопасности, добавив доверенные папки на ваш жесткий диск, если хотите запускать .swf-файлы на вашем локальном компьютере или загрузить их онлайн.

Как конвертировать в один Flash файл

Структура готовой папки

Хотя папка содержит больше, чем один .swf файл, он функционирует как отдельный объект. Файл index и папка data являются вспомогательными. Вы можете в этом убедиться. Скопируйте .swf файл в другую папку и запустите его. Нажмите правой кнопкой на .swf файл и откройте его в браузере, если этот тип файла еще не объединен с ним.

Примечание: веб-объекты не будут воспроизводиться, потому что информация о них хранится в isplayer.js. Мы не рекомендуем публиковать что-то более серьезное, чем простая презентация до 50 слайдов с несколькими аудио или видео записями.

Расширенные настройки Flash

Расширенные настройки Flash обычно используются только разработчиками. Если вы не создаете Flash-презентацию, которая будет являться одним из модулей другого проекта на Flash, вы можете оставить эти настройки по умолчанию.

Когда вы выберете режим конвертирования, который включает Flash (Для компьютера (Flash), Универсальный (HTML5, Flash), Создать EXE), некоторые Расширенные настройки могут измениться.

Опция Отделяемые ресурсы поможет хранить видео, аудио и встроенные Flash-ролики вне .swf файла презентации (в папке data). Эта функция пригодится при конвертировании объемных PowerPoint презентаций (более 500 Mb). Технически, для конечного пользователя не появится никаких различий при просмотре.

Параметры Flash-ролика позволяют выбрать версию Flash-плеера и настроить частоту кадров. Эти опции важны только для разработчиков, для тех случаев, когда в iSpring необходимо создать . swf файл, соответствующий версии Flash Player родительского Flash ролика .swf. Изменение частоты кадров также имеет значение только в аналогичной ситуации.

Кроме того, вы можете Отключить меню во Flash и Отключить опцию «Печать». Эти настройки позволяют уменьшить количество пунктов меню, которое появляется при нажатии правой кнопкой мыши на .swf презентацию.

Загрузчик – единственная опция, которая будет влиять на визуальное оформление веб-презентации, отображая значок загрузки перед запуском сконвертированной Flash-презентации.

Универсальный (HTML5, Flash)

Режим конвертирования Универсальный – уникальная технология iSpring.

Универсальный формат обеспечивает хороший баланс совместимости со всеми устройствами. Он конвертирует PowerPoint презентацию в оба формата – Flash и HTML5. Когда вы запускаете файл index.html, скрипт автоматически определит устройство и версию браузера, который используется для просмотра, и будет показывать подходящую версию презентации.

Принцип работы скрипта

1. HTML5 – основной формат. Он будет использоваться в большинстве случаев, если вы используете компьютер с современным браузером, который поддерживает HTML5 или любое мобильное устройство.
2. Flash-контент имеет второстепенный приоритет и будет показываться, только если вы используете старую версию браузера, которая не поддерживает HTML5.

Примечание: в 7ой версии iSpring приоритет имел формат Flash.

Преимущества

• Лучшая совместимость со всеми возможными платформами

Недостатки

• Время конвертации. Конвертация простой презентации в два разных формата займет в два раза больше времени, чем в один.
• Размер готового файла. Пространство, занимаемое вашей универсальной презентацией будет в два раза больше, чем HTML5 или Flash по отдельности.
• Если у вас старая версия браузера, используются ограничения безопасности Flash. Гиперссылки и другие внешние объекты не будут работать.

Исполняемый файл (Создать EXE)

Эта опция позволяет публиковать презентацию также в формат Flash и добавит исполняемую оболочку Flash Player.

EXE создает один исполняемый программный файл в формате Flash, который открывается в отдельном окне без необходимости браузера. EXE подходит только для Windows платформ и может быть заблокирован некоторыми фаерволами и программами от вредоносного ПО.

Преимущества

• Запуск в отдельном окне на компьютере
• Будет запускаться на компьютере, даже если не установлен Adobe Flash Player

Недостатки

• Работает только на Windows. Никакой поддержки Mac или Linux, и конечно нет поддержки мобильных устройств
• Обычно невозможно отправить через интернет из-за антивирусных программ, которые блокируют все файлы .exe по умолчанию.

Запускать в iSpring Viewer

При включенной опции Запускать в iSpring Viewer во время конвертации будут созданы дополнительные файлы. Поэтому, когда вы разместите презентацию на веб-хостинге и запустите ее через мобильное устройство, вы увидите предложение открыть презентацию в бесплатном мобильном приложении. iSpring Viewer позволяет просматривать презентации на iPad, iPhone или Android-устройствах, даже оффлайн. Подробнее о приложении →

Создать Zip-архив

Эта опция запакует все ваши файлы в один ZIP-файл для удобной транспортировки. Помните, перед загрузкой материалов в веб, вы должны разархивировать его, чтобы браузер смог получить доступ к структуре и связанным файлам. Используйте эту опцию для последующей загрузки в систему дистанционного обучения или отправки по email.

Вопросы?

Читайте статьи в нашей Базе знаний и следите за новостями в блоге iSpring.

Free HTML5 Video Player and Converter 5.0.98.721

AndroidiPhoneWindowsLinuxФорум  Приложения / Мультимедиа / Конверторы и кодировщики / org/SoftwareApplication»> Free HTML5 Video Player and Converter — Описание разработчика: «Free HTML5 Video Player and Converter от DVDVideoSoft создает HTML5 видео для проигрывания на сайте или блоге в HTML5-совместимых браузерах даже без установки Adobe Flash Player. HTML5 video player и видео файлы, созданные программой, будут проигрываться во всех браузерах, которые поддерживают видео HTML5. Программа создает MP4 и OGV видео файлы, которые можно воспроизвести в разных браузерах. Это приложение поможет вам сэкономить время благодаря совместимости с разными браузерами. Программа конвертирует видео файлы *.avi; *.ivf; *.div; *.divx; *.mpg; *.mpeg; *.mpe; *.mp4; *.m4v; *.webm; *.wmv; *.asf; *.mov; *.qt; *.mts; *.m2t; *.m2ts; *.mod; *.tod; *.vro; *.dat; *.3gp2; *.3gpp; *.3gp; *.3g2; *.dvr-ms; *.flv; *.f4v; *.amv; *.rm; *.rmm; *.rv; *.rmvb; *.ogv; *.mkv; *.ts в стандарт html5, совместимый с веб. Выходные форматы: *mp4 и *ogv. Free HTML5 Video Player and Converter не содержит вирусов и шпионских программ. Эта программа абсолютно бесплатна и безопасна как для установки, так и для использования. Free HTML5 Video Player and Converter — бесплатный продукт для личного и коммерческого использования. Примечание: HTML5-совместимые браузеры: Internet Explorer 9 и последующие версии, Chrome 3.0 и последующие версии, Firefox 3.5 и последующие версии, Safari 3.1 и последующие версии, Opera 10.5 и последующие версии, Android 2.0 и последующие версии, iOS 2.0 и последующие версии.» Скачать Free HTML5 Video Player and Converter 5.0.98.721 бесплатно можно по этой ссылке: Скачать Free HTML5 Video Player and Converter 5.0.98.721 СКАЧАТЬ Название: Free HTML5 Video Player and Converter Разработчик: DVDVideoSoft Ltd Обновлено: 26. 07.2016 23:41 Цена: Бесплатная Русский язык: Есть ОС: XP/Vista/7/8/10 Размер: 27.41 МБ Оценка: Программное обеспечение для XP/Vista/7/8/10 Приложения / Мультимедиа / Конверторы и кодировщики (9928 / 0) Новые приложения 19.10.2022 20:19 Разработчик: Shark007 Загрузок: 93055 Бесплатная Бесплатный набор кодеков, необходимых для просмотра видео в Windows 19. 10.2022 20:19 Разработчик: Shark007 Загрузок: 27982 Бесплатная Бесплатный набор видео- и аудио-кодеков для 32- и 64 битных Windows 11, Windows 10, Windows 8 и Windows 7 18.10.2022 03:54 Разработчик: K-Lite Загрузок: 5938799 Бесплатная K-Lite Codec Pack Full — набор кодеков и инструментов для проигрывания аудио и видео практически любых форматов 18.10.2022 03:50 Разработчик: K-Lite Загрузок: 195411 Бесплатная K-Lite Codec Pack Update — пакет для обновления популярного набора кодеков до новейшей версии 18. 10.2022 01:28 Разработчик: KL Software Загрузок: 580434 Бесплатная K-Lite Mega Codec Pack — большой набор самых разнообразных кодеков и медиадополнений к браузерам, а также парочка медиаплееров Топ приложений сегодня 18.10.2022 01:28 Разработчик: KL Software Загрузок: 580434 Бесплатная K-Lite Mega Codec Pack — большой набор самых разнообразных кодеков и медиадополнений к браузерам, а также парочка медиаплееров 18.10.2022 03:54 Разработчик: K-Lite Загрузок: 5938799 Бесплатная K-Lite Codec Pack Full — набор кодеков и инструментов для проигрывания аудио и видео практически любых форматов 27. 09.2022 02:07 Разработчик: Kyle Schwarz Загрузок: 5800 Бесплатная Пакет скомпилированных бинарных файлов FFmpeg для быстрого и качественного преобразования видео- и аудио-файлов из одного формата в другой 19.10.2022 20:19 Разработчик: Shark007 Загрузок: 93055 Бесплатная Бесплатный набор кодеков, необходимых для просмотра видео в Windows 17.06.2013 13:06 Разработчик: Media Converters Загрузок: 19572 Бесплатная »Видео в видео» является бесплатной программой для конвертирования видео и аудио

Какие форматы мне нужны для видео HTML5?

← Назад

BY Zencoder

TAGS

Когда дело доходит до встраивания видеоконтента в Интернет, тег в HTML5 — это самое простое. Он позволяет воспроизводить видео во всех современных браузерах (включая мобильные!), а это означает, что большинству зрителей не понадобится плагин, такой как Flash. Мы рассмотрели эту же тему еще в 2010 году, но с тех пор многое изменилось с точки зрения как браузеров, так и устройств. Хотя HTML5 и элемент видео прошли долгий путь с 2010 года, для издателей остается много таких же сложных вариантов. До сих пор нет серебряной пули кодека, который поддерживают все браузеры, а совершенствование мобильных устройств означает разные уровни поддержки видео. В этом посте мы рассмотрим, какие результаты лучше всего подходят для Интернета, поддержку мобильных устройств и коснемся рекомендаций по битрейту. В конечном счете, наилучшие результаты для вас зависят от ваших потребностей, но вот базовое руководство по началу работы с видео HTML5.

Подождите… зачем избегать Флэша?

====================

Одна из лучших особенностей видео HTML5 заключается в том, что это означает, что (большинству) пользователей не нужно будет использовать Flash для воспроизведения . Вы можете спросить: «Что такого плохого во Flash? Кажется, еще вчера с его помощью создавались целые сайты!» Есть целая куча причин, но в конечном итоге все сводится к лучшему опыту для пользователя. Видео в формате HTML5 загружается быстрее, чем плагин Flash, и использует меньше системных ресурсов, кроме того, его намного проще использовать с точки зрения веб-разработчика. Мобильные устройства также имеют разрозненную поддержку Flash, но ни iOS, ни Android (начиная с версии 4.1) ее не поддерживают. При этом Flash по-прежнему играет важную роль в Интернете. Многие старые браузеры не поддерживают видео в формате HTML5, поэтому для их поддержки вам потребуется предоставить резервную копию Flash. Большинство видеопроигрывателей HTML5 (например, Video.js) сделают это за вас. С этого момента мы будем работать, исходя из предположения, что мы пытаемся по возможности избегать загрузки резервной копии Flash.

Какие форматы?

=============

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

Минимум

——-

Как минимум вам понадобится файл .mp4 с H.264 + AAC (или MP3). H.264 изначально поддерживается большинством браузеров и может воспроизводиться с использованием резервного флэш-памяти в браузерах, где его нет. H.264 High Profile обеспечивает высочайшее качество, но Baseline имеет наибольшую поддержку, особенно среди мобильных устройств (подробнее об этом позже). Поддерживаемые настольные браузеры

• Safari 3.1+
• Chrome 3.0+
• Internet Explorer 9.0+
• Firefox 21, 24 (инвалиды по умолчанию в 24, в зависимости от System Codec)
.
• Android Browser 3.0+
• Safari (iOS) 3.1+
• Firefox (Android) 17.0+
• Internet Explorer (Windows Phone) 9.0+

Несколько форматов

———— —-

Если вы хотите обеспечить естественное воспроизведение в как можно большем количестве браузеров, вам необходимо также включить воспроизведение OGV (Ogg Theora + Vorbis) или WebM (VP8 + Vorbis). Вы можете включить оба для максимального охвата, но большинство браузеров, поддерживающих один, будут поддерживать и другой. Supported Desktop Browsers WebM

• Chrome 6.0+
• Firefox 4.0+
• Opera 10.60+

Ogg

• Chrome 3.0+
• Firefox 3.5+
• Opera 10.50+

Поддерживаемые мобильные браузеры

• (оба) Браузер Android 2.3+

В 2010 году Ogg поддерживался только 44,64% браузеров, в то время как Интернет поддерживался только 44,64% браузеров. В 2013 году поддержка между ними почти одинакова. По состоянию на декабрь 2012 года Ogg поддерживается в 58,85% браузеров, а WebM — в 58,03%. Если вы собираетесь выбирать между ними, мы предлагаем использовать WebM. Еще в 2010 году мы сказали, что считаем WebM будущим открытого видео, и мы до сих пор верим, что это так. WebM является лучшим кодеком и имеет большой импульс, поэтому мы думаем, что он будет только расти. Рекомендация : MP4 + WebM (или MP4 + WebM + Ogg для максимального охвата)

Что насчет мобильных устройств?

—————————

Как и для рабочего стола, нет единого профиля, который работал бы на всех мобильных устройствах. Большинство современных устройств поддерживают H.264, но, к сожалению, существует множество вариантов поддерживаемого профиля H.264. К счастью, вы можете охватить большинство современных мобильных устройств всего несколькими выходами. Основное различие между устройствами заключается в поддерживаемом разрешении и профиле H.264. Более высокие профили (Main и High) обеспечивают лучшее качество при определенном размере файла, но их сложнее декодировать, а это означает, что старые устройства не могут их поддерживать. Базовый уровень является самым простым, но поддерживается большинством устройств.

1. Большинство современных мобильных устройств поддерживают MP4/H.264. Сюда входят все серии iOS (iPhone, iPod, iPad, Apple TV и т. д.), большинство устройств Android, Windows Phone 7, современные телефоны Blackberry и т. д. Примечание : вы можете использовать один и тот же файл как для современных мобильных устройств, так и web, поэтому, если вы хотите уменьшить количество версий, вы можете обойтись только одной. Если вы хотите поддерживать более старые мобильные устройства (в терминах iPhone, 3GS и старше), вам нужно придерживаться профиля Baseline. Новейшие устройства (такие как iPhone 4S и 5) поддерживают High, но несколько более старые поколения (такие как iPhone 4) поддерживают только до Main.
2. Используйте 3GP/MPEG4 для более старых мобильных устройств. Большинство Blackberry и некоторые Android-устройства также поддерживают 3GP, а 3GP обычно воспроизводится даже на iPhone/iPod (поскольку iOS воспроизводит MP4/MPEG-4, а 3GP — это всего лишь подмножество MP4).
3. Современные устройства Android (Android 2.3.3+) поддерживают WebM.

Рекомендация: Минимум, MP4, 640×480 или 480×360 для самой широкой поддержки. Максимум четыре версии MP4 (480×360, 640×480, 720p + основной и 1080p + высокий профиль) плюс одна версия 3GP (320×240). В зависимости от вашей аудитории, вам, скорее всего, подойдет набор выходов где-то посередине, но смотрите наш предыдущий пост для конкретных настроек кодирования.

Как насчет нескольких битрейтов?

Предоставляя несколько копий большого видео с разными размерами и битрейтом, вы можете поддерживать пользователей с разной скоростью подключения к Интернету. Если видео, которое вы предоставляете, имеет HD (или близкое к нему), вы, вероятно, захотите предоставить несколько вариантов. Скажем, самая качественная версия видео, которую вы предоставляете, — 1280 x 720, вы также можете предоставить версию 640 x 480. Если максимальное качество — 1920 x 1080, вы можете увеличить количество воспроизведений, чтобы также обеспечить 640 x 480 и 1280 x 720. Имейте в виду, что элемент видео HTML5 ничего не знает о выборе того битрейта, который нужен вашему пользователю, поэтому вам нужно либо написать собственную логику, чтобы угадать, какое представление лучше, либо позволить пользователю выбирать. Как правило, мы предлагаем предоставить пользователю более низкокачественную версию, а затем позволить ему выбрать более качественную версию, если он захочет.

TL;DR

1. Минимум: MP4/H.264 + WebM. Воспроизведение MP4 используется в качестве резервного варианта Flash, когда это необходимо.
2. Для мобильных устройств тот же MP4 выше (с использованием профиля Baseline) унесет вас далеко вперед. Используйте 2-3 воспроизведения с разными разрешениями и профилями, чтобы обеспечить более широкую совместимость устройств и качество видео.

Рекомендации Ниже приведены некоторые рекомендуемые конфигурации. Zencoder поддерживает все эти форматы, и если вам интересно, как создать оптимальные выходные профили с помощью Zencoder, просто свяжитесь с нами. Если вы хотите увидеть примеры запросов API для HTML5 и конкретных устройств, ознакомьтесь с шаблонами в конструкторе запросов 9.0005

1. Просто заставь это работать
   • HTML5, Flash, Mobile: MP4/H. 264, базовый профиль, 640×480
   • HTML5: WebM
2. Немного округлить
   • HTML5, Flash: MP4/H.264, Высокий профиль
   • HTML5: WebM
   • Мобильный телефон: MP4/H.264, базовый профиль, 480×360 или 640×480
3. Support4 well

   3

   • HTML5, Flash: MP4/H.264, Высокий профиль
   • HTML5: WebM
   • HTML5: Ogg
   • Мобильный: MP4/H.264, базовый профиль, 480×360, для старых мобильных устройств
   • Мобильный: MP4/H.264, основной профиль, 1280×720, для старых устройств iOS (iPhone 4 и более старые iPad/Apple TV). Новейшие устройства (iPhone 5 и т. д.) могут поддерживать воспроизведение высокого профиля для настольных ПК.
   • Мобильный: 3GP/MPEG4, 320×240 и/или 177×144, для отличных от смартфонов*

* Выход 3GP в настоящее время находится в стадии бета-тестирования в Zencoder. Свяжитесь с нами, чтобы попробовать.

Форматы видео HTML5 и кодек

18 июля 2012 г. html5video Видео HTML5

Когда веб-мастера работают с видео HTML5, самое важное, что им нужно знать, это форматы видео и кодеки для HTML5. Так что же такое видеоформаты и кодеки HTML5? На данный момент три поддерживаемых браузером HTML5 видеокодека:

• MP4 : файлы MPEG 4 с видеокодеком h364 и аудиокодеком AAC
• WebM : файлы WebM с Видеокодек VP8 и Аудиокодек Vorbis
• Ogg : файлы Ogg с видеокодеком Theora и аудиокодеком Vorbis

Прежде чем выбрать кодек для HTML5, имейте в виду, что только эти три совместимы с браузерами HTML5, а не с Flash или любыми другими форматами или кодеками. Теперь вы разбираетесь в видеоформатах и ​​кодеках HTML5. Но какой из них я должен использовать при конвертации своих видео, я все равно должен сделать выбор, верно? Да, это верно для большинства видеокодеров или видеоконвертеров. Прежде чем перейти к конвертации видео в другой формат, вам всегда будет предложено сделать выбор между разными кодеками, форматами или устройствами. Единственным исключением является HTML5 Video Player, который разработан специально для преобразования и встраивания видео HTML5. Он может одновременно кодировать ваше видео в три видеоформата HTML5, поддерживаемые всеми последними веб-браузерами. Хорошо, теперь предположим, что у вас не установлен HTML5 Video Player, тогда как выбрать видеокодек HTML5, который действительно будет работать с браузерами HTML5 практически на всех устройствах?

К сожалению, ни один кодек не будет работать со всеми основными проигрывателями, поэтому, если вы хотите, чтобы ваше видео увидела наибольшая группа людей, вам следует задуматься о конвертации его как минимум в два формата WebM и H.264. В таблице ниже показана поддержка браузером видеокодеков HTML5:

	Андроид	Хром		Firefox		Internet Explorer	iOS	Опера		Сафари
Кодек		Win	Mac	Win	Mac	Win		Win	Mac	Win	Mac
MP4 или H. 264	3,0	9	7	х	х	9	3	х	х	5	5
ВебМ	2,3	9	7	3,6	3,6	Требуется компонент!	х	10,63	10,63	х	х
огг/Теора	2,3	9	7	3,6	3,6	х	х	10,63	10,63	х	х

Из приведенной выше таблицы поддержки видеокодеков HTML5 видно, что, если у вас могут быть встроены как mp4, так и webm, видео вашего веб-сайта должно воспроизводиться практически на всех компьютерах с системой Windows или Mac, мобильных телефонах и планшетах. Android и iOS.

Однако преобразование видео в видеоформаты HTML5 может быть проблемой для большинства из нас, так как не все являются профессионалами, мы не знаем, как кодировать видео, не говоря уже о кодировании в разные кодеки только одного видео. Вы можете найти множество видеоконвертеров или кодировщиков для преобразования кодеков MP4 или H.264, однако может быть очень сложно найти инструменты для преобразования в ogg/Theora и WebM/VP8. В качестве универсального решения мы рекомендуем вам попробовать HTML5 Video Player от Socusoft, вы можете скачать HTML5 Video Player здесь.

html5, видеокодек html5, видеокодеки html5, формат видео html5, форматы видео html5

html — атрибут кодеков тега видео html5

Вопрос задан 9 лет, 5 месяцев назад

Изменено 3 месяца назад

Просмотрено 36 тысяч раз

52

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Я пытаюсь указать конкретный видео/аудиокодек в теге видео, используя

 <элементы управления видео poster="movie.jpg">
    
    
Это резервный контент

 

, но не могу найти правильный оператор кодеков для воспроизведения видео, я загрузил видеоанализатор и вижу, что это avc1, и вижу, что аудиокарта.40.2, но могу определить остальную часть кодека, что делает 4d401e означает выше?

Ура Тоби

• html
• video

Параметр codecs указан в RFC 6381. В частности, см. раздел 3.3, где описаны значения avc1 и mp4a .

В случае avc1.4D401E , avc1 указывает видео H.264, за которым следует точка и три двузначных шестнадцатеричных числа, определенных стандартом H.264:

1. profile_1idc 9000
2. байт, содержащий ограничивающий_набор флаги (в настоящее время от limited_set0_flag до ограничения_set5_flag и зарезервированных_zero_2bits )
3. уровень_idc

Некоторые примеры:

• avc1. 42E01E : Ограниченный базовый профиль H.264, уровень 3
• avc1.4D401E : Основной профиль H.264, уровень 3
• avc1.64001E : Высокий профиль H.264, уровень 3

Это также второй, третий и четвертый байты набора параметров последовательности и блока конфигурации AVC в файле MP4. Вы можете сбросить эти байты с помощью такой программы, как mp4file : mp4file --dump movie.mp4 . Найдите поле avcC (конфигурация AVC) и шестнадцатеричные значения для AVCProfileIndication , profile_compatibility и AVCLevelIndication .

Как и для mp4a.40.2 , mp4a означает аудио в формате MPEG-4. За ним следует точка и шестнадцатеричный код ObjectTypeIndication ( objectTypeId в mp4file output), который можно найти на сайте регистрации MPEG4. Если это шестнадцатеричное значение равно 40 (ISO/IEC 14496-3 Audio), за ним следует еще одна точка и тип аудиообъекта в десятичном формате. Они перечислены в стандарте ISO/IEC 14496-3 и в Википедии и соответствуют первым 5 битам DecoderSpecificInfo ( decSpecificInfo ) (если только эти биты не равны 31, в этом случае добавьте 32 к следующим 6 битам). ). mp4a.40.2 указывает на звук AAC LC, который обычно используется с видео H.264 HTML5.

Например, codecs="avc1.42E01E, mp4a.40.2" будет правильным для фильма ниже:

 $ mp4file --dump movie.mp4
...
    тип avcC (moov.trak.mdia.minf.stbl.stsd.avc1.avcC) ◀━━ avc1
     Версия конфигурации = 1 (0x01)
     AVCProfileIndication = 66 (0x42) ◀━━ 42
     profile_compatibility = 224 (0xe0) ◀━━ E0
     AVCMLevelIndication = 30 (0x1e) ◀━━ 1E
...
    тип esds (moov.trak.mdia.minf.stbl.stsd.mp4a.esds) ◀━━ mp4a
     версия = 0 (0x00)
     флаги = 0 (0x000000)
     ЕСИД = 2 (0x0002)
     streamDependenceFlag = 0 (0x0) <1 бит>
     URLFlag = 0 (0x0) <1 бит>
     OCRstreamFlag = 0 (0x0) <1 бит>
     streamPriority = 0 (0x00) <5 бит>
     decConfigDescr
      objectTypeId = 64 (0x40) ◀━━ 40
      streamType = 5 (0x05) <6 бит>
      восходящий поток = 0 (0x0) <1 бит>
      зарезервировано = 1 (0x1) <1 бит>
      bufferSizeDB = 0 (0x000000) <24 бита>
      максимальный битрейт = 78267 (0x000131bb)
      средний битрейт = 78267 (0x000131bb)
      decSpecificInfo
       информация = <2 байта> 11 90 |. .| ◀━━ 2 (первые 5 бит в десятичном формате)
...
 

3

Вы можете использовать инструмент MP4Box, чтобы узнать строки кодека в формате RFC6381. Тем не менее, вы должны присоединиться к ним с запятыми.

Вы можете использовать эту команду:

MP4Box -info big.mp4 2>&1 | grep RFC6381 | awk '{print $4}' | паста -sd, -

3

mark4o дает лучшее объяснение того, как расшифровывать информацию о кодеке, которое я когда-либо видел. Превосходно.

Одна часть, которая может потребовать немного больше подробностей, это то, как выделить конкретный тип аудио объекта из значения decSpecificInfo. Найти часть «mp4a.40» очень просто, раздел «.2» может быть немного сложнее.

Начнем с последовательности однобайтовых шестнадцатеричных значений: «11 90» в примере mark4o или «12 08» в моем случае. Оба они составляют в общей сложности 2 байта.. . может быть больше значений, но только первые 2 имеют значение для нахождения типа объекта (и обычно только первый байт). Мы ищем отдельные биты, поэтому преобразуйте каждую цифру шестнадцатеричных значений в двоичные; для каждой шестнадцатеричной цифры должно быть 4 двоичных разряда. Возьмите первые 5 двоичных цифр — 4 из первой шестнадцатеричной цифры, 1 из следующей — и преобразуйте это двоичное значение в десятичное. Вот шаги:

 Пример 1 (11 90):
Начальное значение: 11 90
Разделите шестнадцатеричные цифры: 1 1 9 0
Преобразовать каждую цифру в двоичную: 0001 0001 1001 0000
Возьмите первые 5 бит: 0001 0
Объединить в двоичное значение: 00010
Преобразовать в десятичную: 2
Пример 2 (12 08):
Начальное значение: 12 08
Разделите шестнадцатеричные цифры: 1 2 0 8
Преобразовать каждую цифру в двоичную: 0001 0010 0000 1000
Возьмите первые 5 бит: 0001 0
Объединить в двоичное значение: 00010
Преобразовать в десятичную: 2
 

Объекты одного типа, несмотря на разные значения decSpecificInfo.