Html5 видео: 10 бесплатных HTML5 аудио/видео плееров для разработчика

QQ Browser

1. 13.1: Supported

Baidu Browser

1. 13.18: Supported

KaiOS Browser

1. 2.5: Supported

Different browsers have support for different video formats, see sub-features for Детали.

Ресурсы:

Видео для всех

Видео в Интернете — включает информацию о поддержке Android

Подробная статья о видео/аудио элементах

HASE.JS TEST

WEBPLATFORM DOCS

Информация о формате Webm

Подзым. Текстовые дорожки веб-видео

Формат видео HEVC/H.265

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

BY Zencoder

Когда дело доходит до встраивания видеоконтента в Интернет, Тег в 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 имеет наибольшую поддержку, особенно среди мобильных устройств (подробнее об этом позже). Supported Desktop Browsers

• Safari 3.1+
• Chrome 3.0+
• Internet Explorer 9.0+
• Firefox 21, 24 (disabled by default in 24, depends on system codec)

Supported Mobile Browsers

• Браузер Android 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+

В 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.0003

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