Наступает день, и старый клиент просит вас изготовить для него видео в формате html5, используя флэш как инструмент анимации. "Почему бы и нет, что в этом сложного?" - думаете вы. И начинается.

Процесс работы крупным планом

Если нужно превратить флэш-анимацию в видео для проигрывания средствами HTML5 во всех браузерах и устройствах, включая iPhone и iPad, то подойдет следующий (на первый взгляд кажущийся сложным, но на самом деле - не такой уж и сложный) процесс. Если у вас есть вопросы по конкретным шагам - спрашивайте:

• Создать анимацию во Flash, разместив ее в корне таймлайна, не используя вложенных анимаций. Звуковая дорожка - тоже в корне.
• Экспортировать анимацию в формат несжатого AVI.
• С помощью Virtual Dub cжать AVI-файл, используя компрессор ffdshow.
• С помощью Adobe Media Encoder конвертировать AVI-видео в формат mp4.
• С помощью VLC конвертировапть AVI-видео в формат webM.
• С помощью ffmpeg2theora конвертировапть видео в формат ogg (ogv).
• Соединить все файлы в одной html-странице, воспользовавшись шаблоном:

Образец HTML-кода для встраивания видео

<video class="video-js" width="680" height="100" autoplay onended="onVideoEnded()">
  <source src="procterandgamble.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="procterandgamble.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="procterandgamble.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

Важно: поддержка на сервере

Не забудьте добавить на сервер файл .htaccess с кодом описания mime-типов для видео:

AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/x-m4v .m4v

Если вы не сделаете этого, то браузер может отказать вам в проигрывании видео. Со временем такие настройки типов появятся в конфигурациях серверов по умолчанию - а пока вам нужно позаботиться об этом самим, ведь вы - среди первых! А быть первым всегда немного труднее, но в перспективе это лучше.

Инструменты кодирования в видео-форматы, совместимые с html5:

1. Adobe Media Encoder (для mp4)
2. ffmpeg2theora (для ogg)
3. VLC (для webM)

Почему все так сложно?

читать далее

Недавно в движке WebKit появился еще один экспериментальный API. Его вполне логично назвали «Page Visibility API». Теперь, чтобы определить видит пользователь страницу или нет достаточно обратиться к свойству: document.webkitHidden если страница скрыта с глаз пользователя, то оно будет true, а … подробнее →

Хочу начать с того, что мне жутко надоели презентации со стандартным лейаутом: сверху шапка с темой, потом набор пунктов, снизу футер ну и справа и/или по центру картинка может какая-то или диаграмма.

Скучно!

Где же креатиффность? Неужели не хочется не просто раскрыть свою тему, а сделать это так, чтоб даже тем, кому не интересна тема, будут заинтересованны подачей материала? Блин, мы ж веб-девелоперы, так почему же мы создаем презентации в левых программах, а не там, где мы лучше всех?

Полностью рабочий эмулятор GBC, работает с нормальной скоростью. Графика выводится с помощью canvas. Поддерживается загрузка файлов с жесткого диска и через интернет, а так же сохранения в LocalStorage. Можно заново проходить Mario, Alone in the Dark, Pokemon, Zelda и GTA — теперь и в браузере.

Это продолжение статьи про основы LibCanvas. Если первая часть затрагивала теоретические засады, то в этой части мы перейдём к практике и постараемся реализовать совсем базовые и простые вещи. Цель статьи — осилить самые основы LibCanvas, мы напишем очень простые скрипты, малопригодные для использования в реальной жизни, но вы их можете развить во что-то великое.