Архив рубрики ‘CSS’ Category

Dec
09
HTML5 видео уже тут
1 балл2 балла3 балла4 балла5 баллов (стать первым, кто оценил!)
Loading ... Loading ...

Для тех кто знает и понимает зачем это, живой пример реализации концепции HTML5 в видео онлайн-плеера:

Ограничения те же самые, что и у ютуба, а именно:

Поддерживаются браузеры, способные обрабатывать видеотег стандарта HTML5, а также видеокодек h.264 или формат WebM (с кодеком VP8). К ним относятся следующие:

  • Firefox 4 (WebM)
  • Google Chrome (WebM и h.264)
  • Opera 10.6+ (WebM)
  • Apple Safari (h.264, версия 4+)
  • Microsoft Internet Explorer 9 (h.264)

Примечания

  • Поддержка полноэкранного режима реализована частично. Нажатие кнопки перехода в полноэкранный режим приведет к расширению экрана проигрывателя до размера окна браузера. Если ваш браузер поддерживает полноэкранный режим, вы можете использовать его для просмотра всего видео в полноэкранном режиме
  • Проигрыватель HTML5 содержит значок на панели управления. Если вы не видите значок HTML5 на панели управления, вы будете переадресованы на проигрыватель Flash (вследствие приведенных ниже ограничений)

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

P.S. Фулскрин не работает, т.к. видео вставлено через iframe, выйти за пределы которого видео естественно не может, если не загружено с того же домена.

P.S.2. Браузеры не поддерживающие video-тег (IE < 9, к примеру) или которые не умеют играть VP8 или H264 будут видеть перед собой флеш-плеер. Theora выпилил принципиально, т.к. ущербный кодек и будущего в HTML5 для него нету.

P.S.3. Код еще не очень, собираюсь на JQuery переписать чуть позже. Чисто для демонстрации.

Oct
23
Как скачать видео с RuTube
1 балл2 балла3 балла4 балла5 баллов (4 голоса, средний балл: 5 из 5)
Loading ... Loading ...

RuTube Если посмотреть в интернетах, то рунет полон от криков по типу «как скачать с RuTube», не качается и т.д.

С задачей не справляются большинство известных сервисов для скачивания видео, таких как videosaver, savefrom.net и т.д.

Проблема в том, что команда RuTube решила, что они очень умные (хаха) и не разрешают пользователям запретила скачивать контент с их видеохостинга.

Это разрешают все видеохостинги известные (YouTube, Vimeo, Metacafe), а вот RuTube особенный, он решил со скачиванием бороться альтернативно-одаренным способом — переведя проигрывание видео на сайте на rtmp.

Но настоящих джедаев это конечно не остановит.

Сегодня я расскажу как легко и удобно можно скачать видео с RuTube (делал для своего видеохостинга и с вами поделюсь – с работающим примером на борту).

Update. Рабочий пример (пример удален!!!!)

(more…)

Sep
11
официальный запуск ajaxWindows
1 балл2 балла3 балла4 балла5 баллов (3 голоса, средний балл: 5 из 5)
Loading ... Loading ...

Как уже писали сегодня на хабре был запущен сайт ajaxWindows – продукта для работы в виртуальной ОС прямо из браузера. К сожалению пользователи оперы не смогут оценить достоинства и недостатки данного продукта – его создатели не поддерживают вообще.

P.S. Самому пока попробовать систему в действии не получилось – на сайте выдается:

Thank you for visiting ajaxwindows.com

We are currently experiencing massive amounts of user registrations and traffic.
Please check back with us in an hour.

Thanks for your interest, The Ajax13 Team

Но как только удасться попробовать – отпишусь в комментариях. Возможно кому-то из моих читателей получится пробиться туда – не стесняйтесь – пишите впечатления от использования.

Jul
18
DIV over SELECT in IE
1 балл2 балла3 балла4 балла5 баллов (4 голоса, средний балл: 4 из 5)
Loading ... Loading ...

Меня очень часто спрашивают коллеги и знакомые программисты, как побороть данную проблему в “всеми любимом браузере” Internet Explorer.

Публикую решение, которое я нашел в свое время, когда нужно было решить данную проблему.
Вот оно:

<div id=”media” style=”position:absolute; left:198px;
top:97px; width:400px; height:106px; z-index:3;”>
<iframe style=”position:absolute; left:0px; top:0px; width:100%;
height:100%; z-index:103;”></iframe>

<div style=”position:relative; left:0px; top:0px; width:300px;
height:400px; z-index:203;background-color: #7777FF;border: 1px solid #000;”></div>
</div>

<select style=”position: relative; left:208px; top:165px; width:200px; display: block;”>
<option>Super Ultra Heavy Laser Nuclear Hummer</option>
</select>

Надеюсь это решение поможет кому-то не сушить себе голову над решением данной проблемы, как уже помогло многим.