19 заметок с тегом

html5

Позднее Ctrl + ↑

Тег video и IE

Интересно, когда консорциум W3 отвернулся от тега OBJECT? Помнится, даже IFRAME старательно пытались заменить на OBJECT, а сейчас зачем-то выделили аж два новых тега VIDEO и AUDIO для проигрывания одноимённого контента.

Вообще-то, конечно, с VIDEO и AUDIO всё несколько стандартнее, чем с тегом OBJECT. В IE можно подключить любой ActiveX для проигрывания видео (например, Windows Media Player или Apple QuickTime) и у них будут разное API и свои особенности.

Тем не менее, API ActiveX Windows Media Player хорошо документирован и работать с ним очень просто. Я в последнее время мало программирую на JavaScript и вчера вечером, чтобы освежить знания, попробовал сделал плеер, похожий на VideoJS, но только для IE — с тегом OBJECT и применением VML.

Video tag for IE (25.38КиБ)

По-моему, получилось неплохо (проверял под IE8, подчёркиваю, это сделано только для IE).

Сегодня утром решил не останавливатся на достигнутом и за завтраком начал делать другую JS-задачу (уже по работе). Так запрограммировался, что опоздал на работу. Всё-таки JavaScript очень приятный язык.

P.S. Некоторые вещи там сделаны неоптимально, так что я бы очень рекомендовал несколько подчистить код, если кто-то захочет его использовать.

P.P.S. Кнопочки и progress bar нарисованы через VML.

HTML5: события offline и online

На сайте JavaScript.ru появилась статья о новых событиях в JavaScript — offline и online (реализованы в Firefox 3.5 и Internet Explorer 8.0). Цитирую выводы:

Эти события никак не связаны с подключением к сети интернет и к сайту.

Они триггерятся при переходе по клику пользователя в автономный режим и обратно.

Они также триггерятся, когда отключаются все сетевые адаптеры, или подключается хотя бы один. При этом не важно, ведет ли он в реальный интернет.

Firefox глючит, в отличие от IE

Chromium 3: тег VIDEO

Вчера вышел очередной билд dev-версии браузера Chromium 3.0. Насколько я понял, это первый билд, который показали народу. Скорость с которой Google клепает мажорные версии поражает.

А более меня поражает чем так полюбился разработчикам тег VIDEO. Из всего стандарта, кажется, это второе (первое — CANVAS), что стремятся реализовать в браузере. Opera и Safari реализовали, в FireFox 3.5 этот тег тоже уже есть. И вот теперь есть Chromium с поддержкой VIDEO. Я удивился, когда узнал, что IE8 вышел без него (тем более, что аналогичный тег там уже есть — IMG, он умеет проигрывать видео).

Правда по форматам видео полный разброд (вот что значит недописанный стандарт!): Opera и FireFox выбрали Theora, Safari — QuickTime, а Chromium — H.264.

Ogg и тег VIDEO, ActiveX Canvas для IE

Так-так, вот и FireFox 3.1, вслед за «Оперой» начинает поддерживать тег VIDEO и стандарт Ogg Theora для этого видео. Если так дело дальше пойдёт, то Ogg станет форматом для тега VIDEO де факто.

Из других интересных новостей — Vladimir Vukićević разработал ActiveX для IE, который повторяет функциональность этого тега пока только частично, но работа продолжается. Тот же автор обещает в будущем поддержку тегов video и audio, тоже, видимо, в формате ActiveX.

HTML5 и IE

Оказывается, есть немного кривой, но способ заставить IE показывать незнакомые ему теги в глобальном namespace! В частности, это поможет уже сейчас использовать семантические теги из HTML5.

Решение основано на интересном хаке:

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.

Есть другое решение, но оно требует использования namespace. В IE есть всеми забытая технология custom tags. Когда появился черновик HTML5 я пытался использовать её, чтобы внедрить в документ новые теги:

<html xmlns:html5="http://www.w3.org/html/wg/html5/">
<head>
<style type="text/css">
html5\:footer {
    display: block;
    border: 1px solid black;
    padding: 10px; 
}
</style>
</head>
<body>
<html5:footer>This is footer!</html5:footer>
</body>
</html>

Не совсем то, что нужно, если не использовать сторонние средства. Если использовать, то для альтернативного браузера можно оставлять как есть, а для правильных — вычищать ненужное пространство заменой на уровне веб-сервера (делать это не нужно, так как современные браузеры и без этого поймут такой тег, но это как-то более аккуратно).

Далее дело техники. Например, если взять Nginx, в нём есть модули rewrite, browser и sub. Первый умеет выполнять условия, второй — определять браузеры, третий — заменять одну строку на другую. Получается что-то подобное:

modern_browser  msie  1.0;

if ($ancient_browser) {
    sub_filter 'html5:' ''
}

Надо сразу оговориться, что это не готовое решение, а намётки: кроме «html5:» надо так же вычистить «html5\:».

2008   html5   ie   nginx   программирование

HTML5 VIDEO: кто первый? А так же 3D CANVAS

Вышел браузер «Сафари» версии 3.1, в пресс-релизе написано, что «Сафари» — первый браузер, поддерживающий новые теги video и audio из HTML5:

Safari 3.1 is the first browser to support the new video and audio tags in HTML 5 and the first to support CSS Animations. Safari also supports CSS Web Fonts, giving designers limitless choices of fonts to create stunning new web sites

Что касается тега AUDIO — чистая правда, а с VIDEO — вышла накладка. Специальный билд «Оперы», поддерживающий этот тег, вышел 8-го ноября 2007-го года, тогда как Webkit (на движке которого сделан «Сафари») — 12-го ноября, на четыре дня позже.

Кстати, самое интересное, что появилось в том билде «Оперы», это не тег VIDEO, а 3D Canvas — до этого момента тег CANVAS позволял работать только с примитивами на плоскости (отрезками, прямоугольниками, кругами и так далее), знаменитая игра «Canvascape», сделанная с применением этого тега (требует для работы любой браузер, поддерживающий CANVAS), просчитывае 3D-графику самостоятельно, из-за чего игра на средних компьютерах заметно притормаживает.

Для 3D CANVAS задача вращения куба с текстурой, например — тривиальная. Примеров работы с этим новшеством пока немного, в оригинально статье упомянута Snake («змейка») в 3D, написанная Mathieu ’p01’ HENRI.

HTML 5 draft

Странно, но группа W3C анонсировала первый публичный черновой вариант спецификации HTML5. Предрекали, что черновая версия выйдет через пару лет, а сам стандарт — лет через 15. Видимо, счастье наступит раньше. Кстати, читая стандарт HTML5 понимаешь, что «семантическая вёрска» в HTML4 — фикция (к слову, чтобы два раза не вставать, вёрстка «дивами» в текущем состоянии — хак на хаке и такое же гуано как вёрстка таблицами, но сложнее и дороже). Надо будет как-нибудь написать что-то развёрнутое по этому поводу.

Easter Ogg

Из HTML5 официально исключены форматы Ogg Vorbis и Ogg Theora (предназначенные для использования проигрывания мультимедия в тегах AUDIO и VIDEO). Против формата выступали фирмы Nokia и Apple.

Напомню корень проблемы: в HTML есть стредство для внедрения рисунков и определены форматы (GIF, PNG, JPEG), которые гарантированно будут показываться во всех графических браузерах, но нет ничего подобного для видео и аудио. Нет единых форматов и средств управления проигрыванием из браузера через JavaScript. С появлением HTML5 ситуация должна быть исправлена появлением тегов VIDEO и AUDIO и введением стандартов кодеков, которые должны поддерживаться всеми браузерами.

Возможно, вместо форматов Ogg, будут использованы H.264 (MPEG-4) для видео и AAC для звука. Аргументы — тот же H.264 выбирается из-за аппаратной поддержки, что очень критично на мобильных устройствах, тогда как для Ogg придётся писать довольно тяжеловестный по размеру кодек, кроме того, есть опасения по поводу патентов на эти форматы, опасаются, что часть формата может быть покрыта неизвестными патентами.

Так же ходят слухи, что основной причиной того, что форматы Ogg исключили, является то, что они не поддерживают DRM (средства для защиты авторских прав), это соображение возникло, большей частью из-за того, что противником форматов Ogg являются именно Nokia и Apple.

Тег VIDEO в новой «Опере»

Последний эксперементальный билд «Оперы» (ни в коем случае не устанавливайте его поверх вашей рабочей версии — эта версия основана на одной из альфа-версий Opera 9.50) поддерживает новый тег VIDEO, который входит в предварительную версию стандарта HTML5. Пока в качестве формата видео для этого тега выбран бесплатный Ogg Theora (кстати, недавно я писал о веб-камере, где всё ПО пишется под лицензией GNU, там используется тот же формат). Так же этом билде «Оперы» есть возможность использовать тег VIDEO внутри SVG.

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

Самое простое использование тега VIDEO — указание в атрибуте SRC видеофайла, который он должен проиграть и атрибута controls, который указывает должен ли браузер показывать кнопки управления воспроизведением (или разработчик будет управлять видео через соответствующие JavaScript-методы — play, pause, stop). В статье на сайте разработчиков есть несколько примеров.

VIDEO в HTML5 (42.16КиБ)

Стандартные элементы управления (на рисунке) меня совершенно не впечатлили, я бы их использовать не стал, впрочем, дизайн ещё может измениться, да и всегда есть возможность сделать свои кнопки через JavaScript. Больше всего меня поразили методы внедрения видео в SVG — на сайте есть очень несложные в реализации примеры отражения шарика, движущегося внутри видео, в поверхности, наложения на видео фильтров (в примерах — trace edges, grayscale) и клиппинга.

P.S. На домашней странице Chris Double есть ссылки на FireFox3.0alpha9, собранный с поддержкой тега VIDEO.