войти зарегистрироваться

Блог компании MicrosoftКак сделать собственный видео-плеер на HTML5 Video

Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.


Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.

<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).

HTML5Adobe Edge: редактор анимации HTML5/JavaScript

Adobe сегодня выпустила новый инструмент Adobe Edge (public preview), который предназначен для создания простого анимированного контента на открытых стандартах: HTML5, JavaScript и CSS3. Предполагается, что для растущего числа мобильных устройств HTML5 более приемлем, чем Flash. В первую очередь для мобильного рынка и создан новый редактор. Впрочем, никто не мешает делать с его помощью любую веб-анимацию HTML5, а в будущем — HTML5-игры и другие приложения.

Adobe Edge призван удачно дополнить Flash и сохранить позиции Adobe как лидера на рынке ПО для веб-дизайна. Эта компания заявляет, что давно продвигает технологии HTML, в качестве примеров можно привести такие продукты как Dreamweaver, Illustrator, Digital Publishing Suite и недавно вышедший Flash-to-HTML5 конвертер Wallaby.

Редактор Adobe Edge распространяется бесплатно, скачать можно здесь. Версия 1.0 выйдет в следующем году.

Подкасты«Сделайте мне красиво!» Выпуск №25

Вашему вниманию очередной выпуск подкаста о веб-разработке «Сделайте мне красиво!»

Show notes:


Наши ссылки: RSS и лента на rpod.ru
прослушан 105 раз

HTML5Сравнение видеоплееров на HTML5

Philip Bräunlich провёл сравнение возможностей двух десятков свободных видеоплееров, использующих тег video в HTML5 и обобщил результаты в таблице. Там же можно посмотреть их в действии, в том числе и на собственном видео (принимаются mp4 и ogg).

Пожелания и предложения отправляйте в твиттер автору.

HTML5 video player comparison.

FirefoxРазработчики Firefox прилагают усилия для поддержки стереовидео («трёхмерного кино») в формате WebM (для тега video языка HTML5), сперва на видеокартах nVidia

Об этом ещё нигде не заявляли гласно и официально. (Во всяком случае, я не слыхал ещё.) Однако, если самостоятельно пойти и хорошенько поискать, то отыскиваются самые недвусмысленные свидетельства: прямо сейчас в среде разработчиков полным ходом идёт работа над тем, чтобы тег <video> в языке HTML5 оказался пригодным в том числе и для показа стереовидеозаписей (они же «трёхмерное кино», они же «3D-видео») — по меньшей мере, на современных видеокартах nVidia.

Хорошо известно, что интернетный видеоформат WebM (активно продвигаемый Google, например) основан на контейнере «Matroska». Так вот: оказывается, разработчики контейнера ещё летом 2010 года начали оживлённую переписку (вот пример письма) по вопросу о стандартизации упаковки стереовидеозаписей в этот контейнер. В настоящее время этот процесс, по-видимому, достиг своих итогов и позволяет разрабатывать конкретные программные реализации.

И реализации не замедлили появиться!

Содержимое патчей и переписки по нескольким «багам», перешедшим в состояние «FIXED» в багзилле Фонда Мозиллы ([584255], [584259], [617220]), позволяет воочию убедиться в том, что куски NvD3D-специфичного кода (подразумевающего работу Direct3D на видюхах nVidia) ужé приземлились в разные бета-версии браузера Firefox 4 (в том числе — в последнюю, десятую бету), причём с расчётом как на DirectX 9, так и на DirectX 10.

Таким образом, грядущее вебовидение будет стереоскопическим — а не только плоским, как многие думали.

Интересно, как далеко эта эволюция может дойти. Вряд ли ход её ограничится одним только элементом <video>. Прозреваю такой аналог CSS-свойства «z-index», который будет управлять не порядком наложения слоёв, а действительной аппликатою элемента. Опять же есть ещё и WebGL…

Creative CommonsСтатистика по книге «HTML5: Up & Running»

Марк Пилгрим выложил статистику по книге «HTML5: Up & Running», которая опубликована издательством O'Reilly в августе 2010-го. Хотя этот справочник по HTML5 доступен бесплатно на сайте Dive Into HTML5 (под лицензией Creative Commons Attribution), в первые шесть недель было продано более 14 000 копий (из них 25% в цифровой форме). Таким образом, издательство O'Reilly быстро окупило все расходы. Сейчас Пилгрим получил первый чек сверх того, что издательство платило ему авансом в течение года работы над книгой.

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

OperaИграем H.264 в Опере

На написание этой статьи вдохновил костыль для Firefox, созданный Майкрософтом, который позволяет играть HTML5 Video в формате H.264 с помощью аддона Windows Media Player. Поковыряв расширение, было обнаружено, что там используется обычная замена всех <video>-тегов на странице на <object> с подстановкой пути до первого поддерживаемого видео с числа источников. В принципе подход не наилучший, но все же хоть что-то. Сразу же захотелось портировать скрипт под Оперу, но, конечно же, не обошлось без проблем.

FirefoxБета Firefox 4: вышло новое обновление — как оно коснётся веборазработчиков?

Только что вышла последняя* бета Firefox 4 (качайте её вон там). Она содержит сотни исправлений, а также Firefox Sync и Firefox Panorama. И вот беглый обзор новых обстоятельств веборазработки:____________
* Примечание переводчика: речь идёт о четвёртой бета-версии, Gecko/20100818 Firefox/4.0b4.

Персональные блоги Ироническое иллюстрированное пособие по работе с видео в HTML5

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

FirefoxFirefox 4 значительно ускорится и получит поддержку inline SVG

Вечером 30 июня «Мозилла» явилась в Лондон в Англии, чтобы поведать про дополнения («Mozilla Add-Ons») и показать некоторые новые клёвые особенности грядущего Файерфокса 4.

Вероятно, наиболее впечатляющими (если не считать средства создания дополнений «Add-Ons Builder», основанного на «Беспине») оказались следующие будущие возможности Firefox 4:

→  отображение HTML5-видео (<video>)

→  рисование на холсте (<canvas>)

→  манипулирование изображениями на холсте (анализ пикселов, распознавание лиц с помощью opencivitas)

→  технологии «зелёного экрана» (хромакей) в иллюстрациях и видео, достигаемые анализом цвета пикселов

→  HTML5, встраиваемый внутрь SVG (ура!)

→  SVG как <img>

→  SVG как CSS-фон

→  SVG-фильтры, SVG-маски, SVG-контуры обрезки

→  SVG-анимация

→  inline SVG (то есть SVG внутри HTML5)

→  CSS3: селекторы, @font-face, 2D-преобразования (transforms), переходы (transitions), тени, градиенты, вычисления — calc(2em-10px)

→  API: геопозиция (geolocation), оффлайн (IndexDB, localStorage, AppCache, FileAPI: чтение двоичного содержимого из файла, перетаскивание файлов), веб-труженики (web workers) и сокеты (websockets)

→  контроллер на вебсокетах, запускающий презентацию с мобильника

→  WebGL

Некоторые из этих способностей подтверждались демонстрациями:

→  фильтры CSS3 и маски SVG на HTML5-видео: