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

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

Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.
<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls /> Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).
HTML5 → Adobe 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 выйдет в следующем году.
Adobe Edge призван удачно дополнить Flash и сохранить позиции Adobe как лидера на рынке ПО для веб-дизайна. Эта компания заявляет, что давно продвигает технологии HTML, в качестве примеров можно привести такие продукты как Dreamweaver, Illustrator, Digital Publishing Suite и недавно вышедший Flash-to-HTML5 конвертер Wallaby.
Редактор Adobe Edge распространяется бесплатно, скачать можно здесь. Версия 1.0 выйдет в следующем году.
Подкасты → «Сделайте мне красиво!» Выпуск №25
Вашему вниманию очередной выпуск подкаста о веб-разработке «Сделайте мне красиво!»
Наши ссылки: RSS и лента на rpod.ru
Show notes:
- Располагаем текст вдоль любой кривой: дикости CSS3
- Синхронизация проигрывания видео c поведением страницы
- Туториал по Canvas: просто и небесполезно
- Подробное исследование различных способов создания глобальных объектов в JS
- Чего не надо позволять друзьям или почему Норвегия впереди планеты всей
- Наши поздравления группе фронтенда hh.ru
Наши ссылки: RSS и лента на rpod.ru
прослушан 105 раз
HTML5 → Сравнение видеоплееров на HTML5
Philip Bräunlich провёл сравнение возможностей двух десятков свободных видеоплееров, использующих тег video в HTML5 и обобщил результаты в таблице. Там же можно посмотреть их в действии, в том числе и на собственном видео (принимаются mp4 и ogg).
Пожелания и предложения отправляйте в твиттер автору.
HTML5 video player comparison.
Пожелания и предложения отправляйте в твиттер автору.
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…
Хорошо известно, что интернетный видеоформат WebM (активно продвигаемый Google, например) основан на контейнере
И реализации не замедлили появиться!
Содержимое патчей и переписки по нескольким «багам», перешедшим в состояние «FIXED» в багзилле Фонда Мозиллы
Таким образом, грядущее вебовидение будет стереоскопическим — а не только плоским, как многие думали.
Интересно, как далеко эта эволюция может дойти. Вряд ли ход её ограничится одним только
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.
- Теперь Firefox поддерживает свойство «buffered» в HTML5 video.
- Свойство «autobuffer» в HTML5 video заменено на «preload».
- Добавлен экспериментальный API, обеспечивающий более рациональные джаваскриптовые анимации.
- Экспериментальное расширение CSS: отрисовка произвольных элементов в качестве фонов при помощи
-moz-element. - Увеличен размер кэша по умолчанию (было 50 Мб, стало 250 Мб,
см. баг). - Ускорен доступ к некоторым свойствам DOM (.id, .className,
.style, … — см. баги 584287и 584293).
* Примечание переводчика: речь идёт о четвёртой
Персональные блоги → Ироническое иллюстрированное пособие по работе с видео в HTML5
Как это ни грустно, но во многих аспектах информационных технологий до сих пор присутствует огромное количество несовместимых форматов, которые обеспечивают выполнение одних и тех же задач. Марк Пилгрим с иронией показал это на примере работы с субтитрами в вебе.
Firefox → Firefox 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-видео:
Вероятно, наиболее впечатляющими (если не считать средства создания дополнений
→ отображение HTML5-видео (<video>)
→ рисование на холсте (<canvas>)
→ манипулирование изображениями на холсте (анализ пикселов, распознавание лиц с помощью opencivitas)
→ технологии «зелёного экрана» (хромакей) в иллюстрациях и видео, достигаемые анализом цвета пикселов
→ HTML5, встраиваемый внутрь SVG (ура!)
→ SVG как <img>
→ SVG как CSS-фон
→ SVG-фильтры, SVG-маски, SVG-контуры обрезки
→ SVG-анимация
→ inline SVG (то есть SVG внутри HTML5)
→ CSS3: селекторы,
→ API: геопозиция (geolocation), оффлайн (IndexDB, localStorage, AppCache, FileAPI: чтение двоичного содержимого из файла, перетаскивание файлов),
→ контроллер на вебсокетах, запускающий презентацию с мобильника
→ WebGL
Некоторые из этих способностей подтверждались демонстрациями:
→ фильтры CSS3 и маски SVG