Тег 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.

Поделиться
Отправить
26 комментариев
besisland.name

Да, очень странно. От img тоже собирались (в процессе написания XHTML 2) отказаться в пользу object. Да так и не вышло. Жаль.

Евгений Степанищев (bolknote.ru)

Комментарий для besisland.name:

Кстати, да. Что-то такое я смутно помню. Интересно, что является причиной такого резкого поворота на 180 градусов?

wiktar (wiktar.com)

Комментарий для Евгения Степанищева:

Семантика?

Да и проще как-то. У нас ведь кроме картинки (img), аудио (audio) и видео (video) ничего из медиа контента не появилось? Так зачем делать универсальную вещь для всего?

Ну это я так пытаюсь додумать за создателей.

Евгений Степанищев (bolknote.ru)

Комментарий для wiktar.com:

Видимо, раньше им казалось, что «всё внедрённое» чуждо по отношению к тексту, поэтому и запихивали с глаз долой в OBJECT.

hshhhhh.name

Комментарий для Евгения Степанищева:

всего за вечер? круто :(.

Евгений Степанищев (bolknote.ru)

Комментарий для hshhhhh.name:

А чено так грустно? :)

hshhhhh.name

Комментарий для Евгения Степанищева:

это зависть. чему тут радоваться?

hshhhhh.name

Комментарий для Евгения Степанищева:

Кстати, в опере не работает!!!!

Max (filter.pip.verisignlabs.com)

Да там кажется можно было запускать что-то из объектов, даже без скриптов (читал на 0x000000.com, теперь источник недоступен). Вообще объект предполагает наличие встроенных свойств и методов, у видео и аудио они формализованы и опасности не представляют. В отличие, скажем, от флэша.

Евгений Степанищев (bolknote.ru)

Комментарий для hshhhhh.name:

Кстати, в опере не работает!!!!

:)))

Евгений Степанищев (bolknote.ru)

Комментарий для filter.pip.verisignlabs.com:

Да там кажется можно было запускать что-то из объектов, даже без скриптов

Конечно можно. Убираем из кода «<param name=»ShowControls» value=«false» />» и видим родные контролы Windows Media Player.

Задача была в том, чтобы сделать контролы похожими на те, что в VideoJS и показать, что вид плеера в IE тоже кастомизируется. Жаль только перекрыть его нельзя. То есть вывести контролы поверх не получается. Даже iframe не помогает.

Вообще объект предполагает наличие встроенных свойств и методов, у видео и аудио они формализованы и опасности не представляют.

В объекта с заданным classid они тоже заранее известны.

borzdeg.blogspot.com

Я работаю из под Linux. И как я в таком случае увижу ваш видеоролик?
W3C сделал правильно не только в плане семантики, но и в плане выбора плеера в браузере — это могу выбрать я, а не разработчик за меня. слишком большой разброс плееров и браузеров.

Для того же тега video есть возможность «инклюда» внешнего плеера, если тег video не поддерживается. вот туда и вставляются «старые» флеш и ActiveX (фу) плееры.

Евгений Степанищев (bolknote.ru)

Комментарий для borzdeg.blogspot.com:

Я работаю из под Linux. И как я в таком случае увижу ваш видеоролик?

Мой ролик — никак, я сделал эмуляцию VideoJS для IE, для остального есть VideoJS.

OBJECT прекрасно работает под Linux, ну или обязан, так как по стандарту Strict HTML4.01 iframe должен заменяться на OBJECT. В случае Linux и видео всё очень просто, браузер, увидев в теге OBJECT «type=»video/avi«» должен проиграть видео любым, доступным ему образом.

Для того же тега video есть возможность «инклюда» внешнего плеера, если тег video не поддерживается. вот туда и вставляются «старые» флеш и ActiveX (фу) плееры.

Тег OBJECT работает ровно таким же образом. Посмотрите как у меня на сайте сделаны вертикальные даты.

borzdeg.blogspot.com

я имел в виду момент с тем, когда используется «API ActiveX Windows Media Player» в теге object... хотя, может я и не прав и тот же Totem Plugin или VLC Plugin уже умеет это обрабатывать...

borzdeg.blogspot.com

кстати, видео не работает: http://lh3.ggpht.com/_gOBzOTCpA1A/TAjGAMjGu5I/AAAAAAAADCM/NastPhnUjus/s912/1275642510619.png

Fedora + Firefox

Евгений Степанищев (bolknote.ru)

Комментарий для borzdeg.blogspot.com:

Fedora + Firefox

Вы издеваетесь? В статье болдом написано: «подчёркиваю, это сделано только для IE», вся статья пестрит «IE», «только для IE» и так далее, а вы мне говорите, что это в FF не работает?

я имел в виду момент с тем, когда используется «API ActiveX Windows Media Player» в теге object

Потому что я делал для IE.

blog.ad.by

А зачем комментарий «йцукенгшщзхждлорпавыфячсмитьбю (привет автоопределение кодировки в IE)»? Какую проблему он решает?

Евгений Степанищев (bolknote.ru)

Комментарий для blog.ad.by:

Без этого коммента IE, несмотря на выставленную два раза (в header и head) кодировку UTF-8 всё равно пытался выставить Windows CP-1251.

borzdeg.blogspot.com

Комментарий для Евгения Степанищева:

хм... когда второй раз заходил, «прозевал» сей момент. прошу прощения :(

Евгений Степанищев (bolknote.ru)

Комментарий для borzdeg.blogspot.com:

Бывает :)

id.rambler.ru/users/boltai-shaltai/

Комментарий для Евгения Степанищева:

Евгений, а есть какие-то подводные камни при использовании VML для скругления углов в IE в качестве аналога border-radius? Техника выглядит привлекательно, а в продакшене как будет?

Может, неадекватно проседает производительность рендеринга или глюки какие лезут?

Вижу, что страдает валидность документа. И ладно, всё равно скриптом собираюсь навешивать.

Или всё же предпочесть стандартные обёртки с углами-картинками? (Неприятно как)
Лично я полагаю, что если браузер что-то не поддерживает, то и не надо убиваться, чтобы вёрстка смотрелась 100% идентично остальным. Ну, природная данность такая — что смог, то показал. Но не все с этим согласны.

Евгений Степанищев (bolknote.ru)

Комментарий для id.rambler.ru/users/boltai-shaltai/:

Евгений, а есть какие-то подводные камни при использовании VML для скругления углов в IE в качестве аналога border-radius? Техника выглядит привлекательно, а в продакшене как будет?

Я не изучал этот вопрос, лучше покапать в интернете. У себя на сайте я это использую ( http://bolknote.ru/all/1786 ).

Вижу, что страдает валидность документа.

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

Или всё же предпочесть стандартные обёртки с углами-картинками? (Неприятно как)

Лично я полагаю, что если браузер что-то не поддерживает, то и не надо убиваться, чтобы вёрстка смотрелась 100% идентично остальным.
Это называется graceful degradation, я тоже сторонник этого подхода.

gleb-arestov.moikrug.ru

Кстати, на эту же тему ссылочка  http://habrahabr.ru/blogs/ogg/37911/#comment_896297

gleb-arestov.moikrug.ru
Евгений Степанищев (bolknote.ru)

Комментарий для gleb-arestov.moikrug.ru:

Тег VIDEO-то, всё одно, не поддерживается. Некоторую эмуляцию можно сделать, примерно того же самого по возможностям.

Но IE безусловно поддерживает видео, как и другие браузеры, с бородатых годов играющие видео через тег EMBED.

Евгений Степанищев (bolknote.ru)

Комментарий для gleb-arestov.moikrug.ru:

t:video, всё-таки, не то же самое, что VIDEO. Это тег из другого пространства и с другим API.

Популярное