У рунетного плеера Uppod появилась HTML5-версия.
Нашим конструктором плееров пользуется множество уважаемых проектов, поэтому мы решили сделать возможность выбора технологии. Версия на HTML5 будет максимально совместима с текущими настройками версии Flash, которую мы развиваем уже несколько лет. А может и превосходить ее, кто знает. Пока что реализован только базовый функционал без стилей и плейлистов. β-версию плеера можно посмотреть на html5player.ru, а тут можно скачать плеер и опробовать.
Перепробовали несколько редакторов, но по иронии судьбы лучше всего подошел FlashDevelop — бесплатный и очень удобный редактор кода. Рекомендуем и для JavaScript. Работается быстрее, чем с ActionScript — не нужны компиляции, а родная связь с CSS и DOM очень многое упрощает.
Фреймворки (jQuery и т.п.) не использовали, поэтому для работы uppod.js не требует каких-либо библиотек. Сжатый файл весит около 27кБ.
Всю графику интерфейса нарисовали в canvas для сходства с Flash-версией, где можно создавать свои кнопки — они также рисуются программно. FireFox чуть замыливает графику, с остальными браузерами все отлично.
Неожиданной проблемой оказалась анимация поверх видео для индикации буфера — по краям появлялись искажения и артефакты. Поэтому индикацию пришлось сделать аскетично надписью над таймлайном.
Плеер работает во всех браузерах, где есть поддержка HTML5.
Из таблиц видно, что хуже всего обстоят дела с IE, который поддерживает HTML5 только в девятой версии по словам разработчиков (в последней демке нет ни канвы, ни видео). Зато обещают поддержку GPU.
Тесты производительности показали лидерство Chrome и Safari. Хуже всего с нагрузкой у FireFox, вплоть до падения. У FireFox также есть проблема с получением данных о загрузке потока — вместо стандартного свойства buffered до сего дня использовался велосипедный loaded. В вышедшей вчера 4.04b это исправлено, но только для OGG. У Opera вообще ничего нет, поэтому там отображается только линия воспроизведения.
Стандарт HTML5 предлагает проверять браузер на совместимость с форматами и отдавать файл, который поддерживается. Также можно изловчиться, отдав Flash-версию устаревшему браузеру (плеер это умеет сам).
На iPhone (iOS) плеер работает, как кнопка запуска встроенного Quicktime — лучше, чем ничего.
Это то, чем отличается плеер от тега video. Сделали интерфейс максимально похожим на нашу стандартную Flash-версию, с первого взгляда можно и не узнать. Добавили полноэкранный режим на все окно браузера (+F11), основные горячие клавиши, панель управления автоматически прячется во время воспроизведения. В перспективе будет полностью клонирован весь функционал, включая стили, плейлисты и модули (субтитры, реклама и т.д.). Что касается гибкости в мелочах, то Flash за счет многолетней истории выглядит лучше.
Стандартом импорта в блоги скорее всего станет iframe, где можно будет показывать HTML5 и Flash и рекламу. Вопрос только в том, как быстро к этому будут готовы движки блогов и социальных сетей.
Ничего нового не обнаружили, поэтому повторим общеизвестные факты:
С HTML5 приятно работать, стандарт, производительность местами лучше, работает на устройствах без Flash.
Чем HTML5 плох:
— нет кроссбраузерности;
— нет договоренности по форматам;
— нет нормальной поддержки потоков (RTMP и т.п.);
— нет поддержки микрофона и вебкамеры;
— нет инфраструктуры (рекламных сетей, экспорта в блоги и т.д.).
Думается, что HTML5 способен заменить Flash в массовом сегменте рынка медиаплеров за несколько лет, если производители браузеров постараются и найдутся новые технологии передачи потоковых данных.
Плеер HTML5 бесплатен, как и Flash-версия Uppod.
Последние новости:
P.S. Спасибо за баг-репорты, все учтем.
Нашим конструктором плееров пользуется множество уважаемых проектов, поэтому мы решили сделать возможность выбора технологии. Версия на HTML5 будет максимально совместима с текущими настройками версии Flash, которую мы развиваем уже несколько лет. А может и превосходить ее, кто знает. Пока что реализован только базовый функционал без стилей и плейлистов. β-версию плеера можно посмотреть на html5player.ru, а тут можно скачать плеер и опробовать.
Разработка
Перепробовали несколько редакторов, но по иронии судьбы лучше всего подошел FlashDevelop — бесплатный и очень удобный редактор кода. Рекомендуем и для JavaScript. Работается быстрее, чем с ActionScript — не нужны компиляции, а родная связь с CSS и DOM очень многое упрощает.
Фреймворки (jQuery и т.п.) не использовали, поэтому для работы uppod.js не требует каких-либо библиотек. Сжатый файл весит около 27кБ.
Всю графику интерфейса нарисовали в canvas для сходства с Flash-версией, где можно создавать свои кнопки — они также рисуются программно. FireFox чуть замыливает графику, с остальными браузерами все отлично.
Неожиданной проблемой оказалась анимация поверх видео для индикации буфера — по краям появлялись искажения и артефакты. Поэтому индикацию пришлось сделать аскетично надписью над таймлайном.
Зоопарк
Плеер работает во всех браузерах, где есть поддержка HTML5.
| Видео | Браузеры |
| H.264 (MP4), AAC | Safari 3.0+ Chrome 5.0+ iOS 3.0+ Android 2.0+ IE 9.0+ |
| Theora (OGG), Vorbis | FireFox 3.5+ Chrome 5.0+ Opera 10.5+ |
| VP8 (WebM), Vorbis | IE 9.0+ FireFox 4.0+ Chrome 6.0+ Opera 10.6+ |
| Аудио | Браузеры |
| MPEG (MP3) | Safari 4.0+ iOS 3.0+ Chrome 3.0+ |
| Theora (OGG), Vorbis | FireFox 3.5+ Chrome 3.0+ Opera 10.5+ |
| WAV | FireFox 3.5+ Safari 4.0+ Opera 10+ |
Из таблиц видно, что хуже всего обстоят дела с IE, который поддерживает HTML5 только в девятой версии по словам разработчиков (в последней демке нет ни канвы, ни видео). Зато обещают поддержку GPU.
Тесты производительности показали лидерство Chrome и Safari. Хуже всего с нагрузкой у FireFox, вплоть до падения. У FireFox также есть проблема с получением данных о загрузке потока — вместо стандартного свойства buffered до сего дня использовался велосипедный loaded. В вышедшей вчера 4.04b это исправлено, но только для OGG. У Opera вообще ничего нет, поэтому там отображается только линия воспроизведения.
Стандарт HTML5 предлагает проверять браузер на совместимость с форматами и отдавать файл, который поддерживается. Также можно изловчиться, отдав Flash-версию устаревшему браузеру (плеер это умеет сам).
На iPhone (iOS) плеер работает, как кнопка запуска встроенного Quicktime — лучше, чем ничего.
Интерфейс
Это то, чем отличается плеер от тега video. Сделали интерфейс максимально похожим на нашу стандартную Flash-версию, с первого взгляда можно и не узнать. Добавили полноэкранный режим на все окно браузера (+F11), основные горячие клавиши, панель управления автоматически прячется во время воспроизведения. В перспективе будет полностью клонирован весь функционал, включая стили, плейлисты и модули (субтитры, реклама и т.д.). Что касается гибкости в мелочах, то Flash за счет многолетней истории выглядит лучше.
Импорт
Стандартом импорта в блоги скорее всего станет iframe, где можно будет показывать HTML5 и Flash и рекламу. Вопрос только в том, как быстро к этому будут готовы движки блогов и социальных сетей.
Итого
Ничего нового не обнаружили, поэтому повторим общеизвестные факты:
С HTML5 приятно работать, стандарт, производительность местами лучше, работает на устройствах без Flash.
Чем HTML5 плох:
— нет кроссбраузерности;
— нет договоренности по форматам;
— нет нормальной поддержки потоков (RTMP и т.п.);
— нет поддержки микрофона и вебкамеры;
— нет инфраструктуры (рекламных сетей, экспорта в блоги и т.д.).
Думается, что HTML5 способен заменить Flash в массовом сегменте рынка медиаплеров за несколько лет, если производители браузеров постараются и найдутся новые технологии передачи потоковых данных.
Плеер HTML5 бесплатен, как и Flash-версия Uppod.
Последние новости:
- поддержка YouTube API;
- интеграция с рекламными сетями VideoSell, Begun, AdLabs и sms-агрегатором AOneBill;
- локализация интерфейса на любой язык;
- куча новых опций для скинования;
- папки в плейлистах;
- и многое другое.
P.S. Спасибо за баг-репорты, все учтем.
