Pull to refresh

Наш плеер на HTML5

Reading time 3 min
Views 30K
У рунетного плеера Uppod появилась HTML5-версия.
image


Нашим конструктором плееров пользуется множество уважаемых проектов, поэтому мы решили сделать возможность выбора технологии. Версия на 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. Спасибо за баг-репорты, все учтем.
Tags:
Hubs:
+99
Comments 73
Comments Comments 73

Articles