Мультимедиа на Web-странице

 

 

 

 

Скриптовая анимация на Web-странице

 

Скриптовый язык (scripting language, язык сценариев) — язык программирования, разработанный для записи «сценариев», последовательностей выполняемых (пользователем, сервисов, устройством, программой) операций. 

Для интерактивной анимации на широко используются встроенные скриптовые языки:

  • JavaScript (универсальный браузерный скриптовый язык. Silverlight предоставляет расширения для JavaScript, обеспечивающие управление пользовательским интерфейсом браузера и др.)

  • ActionScript (в средах Adobe Flash, Adobe AIR, Adobe Flex)

Пример: реализованная на JavaScript компьютерная игра TETRIS (в стиле - минимализм ;-)

 

11.02.2012 Новая версия версии JavaScript (Harmony) должна быть закончена к концу 2013 года и станет самым большим обновлением за всю историю языка. Некоторые будущие функции JavaScript уже реализованы в браузере Google Chrome  (версия для разработчиков). Чтобы активировать новые функции, нужно в последнем релизе с dev-канала набрать chrome://flags и включить флаг Experimental JavaScript features. Среди новых функций Прокси-объект (симулирует объект или функцию JavaScript и позволяет настраивать практически любой аспект своего поведения).

 

WebGL (Web-based Graphics Library) – библиотека для программного обеспечения, которая расширяет возможности языка программирования JavaScript, позволяя ему создавать интерактивную 3D графику внутри любого совместимого с ней веб-браузера. Код на WebGL выполняется с помощью видеокарты. WebGL – это контекст элемента canvas HTML, который обеспечивает API 3D графику без использования плагинов. В WebGL имеются существенные слабые места в безопасности, такие как отказ в обслуживании и разрешение скриптовых атак.

WebGL включен по умолчанию во все версии Mozilla Firefox, Google Chrome. Safari поддерживает WebGL, но поддержка отключена по умолчанию. WebGL доступен в ночных сборках начиная с Opera 12.00.
Internet Explorer официально не поддерживает WebGL. Плагины Chrome Frame  и IEWebGL  предусматривают опции, необходимые для поддержки WebGL в Internet Explorer.

28.02.2012 Opera Software представила конечную браузер Opera Mobile 12 для Android и Symbian.

Его главным улучшением стала поддержка технологии WebGL, благодаря которой можно играть в игры и просматривать другое интерактивное содержимое прямо в браузере. Для работы с WebGL используется аппаратное ускорение, а работает эта функция только на устройствах с Android. В Opera Mobile 12  реализован новый HTML5 парсер (Ragnarök), добавлена поддержка HTML5 Camera (только для Android 2.1+).

 

 

 

 

Flash на Web-странице

 

Объект Flash (ролик .swf) на Web-странице размещается с помощью тега <object> и требует наличия и поддержки браузером проигрывателя Adobe Flash Player

 

Здесь мы приведём пример как добавить Flash-ролик на страницу.

<object type="application/x-shockwave-flash" data="portfolio/flash/kupe.swf" width="550" height="400">
   <param name="movie" value="portfolio/flash/kupe.swf" />
   <img src="portfolio/flash/large/kupe.jpg" width="550" height="400" alt="купе поезда" />
</object>

Для отображения Flash-ролика этого достаточно, но существует проблема для пользователей Internet Explorer, связанная с необходимостью активации Internet Explorer Active Content Update.

 

Синтаксис:

 

<object width="400" height="325">
<param name="movie" value="kmp-tit.swf">
 </object>

 

Атрибуты тега <object>

height

Задает высоту области для воспроизведения видеоролика.

value

Указывает путь к объекту.

width

Задает ширину области для воспроизведения видеоролика.

 

Пример кода странички с тегом <object>

<!DOCTYPE html>
 <html>
<head>
<title>kmp-flash</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<p align="center">
<object width="400" height="325">
<param name="movie" value="kmp.swf">
</object>
</p>
</body>
</html>

Здесь:

  • <p align="center">  центрирование абзаца

  • <object width="400" height="325"> определяется размер кадра

  • <param name="movie" value="kmp-tit.swf"> указывается характер объекта (movie) и путь к нему

 

 

 

 

 

Flash vs. HTML5!

 

Flash - популярнейшая (в прошлом) лучшая из худших мультимедийная онлайновая платформа.

Flash - лучшая цифровая платформа для мультимедийного творчества.

Flash - плох для современных реалий распространения и воспроизведения сетевого контента.

С распространением интернет-устройств не поддерживающих плагины, придется задуматься об отказе от такого рода технологий. От поддержки Flash отказались Google и Microsoft, которая перестала продвигать и перестает поддерживать в IE 10 (для Windows 8)  Silverlight (собственную, подобную Flash, мультимедийную платформу).

В браузерах iOS и Windows Phone отсутствует поддержка Flash.

Adobe прекращает продвижения технологии Flash на мобильных устройствах

На смену Flash и Silverlight приходят HTML5 и CSS3 и разработчикам придётся освоить процесс создания сложной анимации с их помощью.

Сегодня HTML5 еще не подходит для создания таких полноэкранных приложений, какие могут создать Flash и Silverlight.

15.02.2012 Стивен Синофски (президент Microsoft по Windows): Windows 8 на ARM-процессорах не будет поддерживать Flash, вместо ее будет использоваться HTML5. В интерфейсе Metro Flash также поддерживаться не будет.

09.11.2011 Денни Винокур (вице-президент и генеральный менеджер развития интерактивных технологий в Adobe) HTML5 видится лучшим решением для создания и развертывания контента в браузере на многих мобильных платформах. Мы продолжим работать с ключевыми членами сообщества HTML, включая Google, Apple, Microsoft и RIM, чтобы и дальше развивать инновационные характеристики HTML5 для применения в мобильных браузерах.

21.03.2012 Уолтер Лю (бывший ведущий разработчик Flash Lite в Adobe): Adobe в течение некоторого времени теряла хватку в области мобильных технологий. Flash приняли холодно. Компании надо было что-то делать. И этим “что-то” стал HTML5.

12.01.2012 Согласно исследованию Evans Data уровень использования HTML5 в декабре 2011: 43% в Северной Америке, 39% в EMEA (Европа, Ближний Восток и Африка) и 58% в АТР.

12.01.2012 Согласно исследованию Appcelerator (декабрь 2011) 66% опрошенных программистов заявили о желании разрабатывать мобильные веб-сайты на основе HTML5.

Спецификации HTML5 пока не завершены и в трактовке разных браузеров различаются на 20-30%, что может негативно сказаться на работе конечных программ. Частично это происходит из-за того, что сам стандарт HTML5 пока ратифицирован.

 

 

 

 

Видео на Web-странице (HTML5)

 

Видео на Web-странице размещается с помощью тега <video> (требует поддержки данного тега браузером)

Синтаксис:

<video>
 <source src="URL">
 </video>

 

Атрибуты тега <video>

autoplay

Видео начинает воспроизводиться автоматически после загрузки страницы.

controls

Добавляет панель управления к видеоролику.

height

Задает высоту области для воспроизведения видеоролика.

loop

Повторяет воспроизведение видео с начала после его завершения.

poster

Указывает адрес картинки, которая будет отображаться, пока видео не доступно, не поддерживается, не вопроизводится.

src

Указывает путь к воспроизводимому видеоролику.

width

Задает ширину области для воспроизведения видеоролика.

Закрывающий тег обязателен!

Пример кода странички с тегом <video>

<!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>kmp-video</title>
 </head>
 <body>
  <video width="400" height="300" controls="controls" poster="video/kmp.jpg">
   <source src="video/kmp.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/kmp.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/kmз.webm" type='video/webm; codecs="vp8, vorbis"'>
   </video>
 </body>
 </html>

Здесь:

  • <video width="400" height="300" controls="controls" poster="video/kmp.jpg"> определяется размер кадра, наличие панели управления и замещающая (предваряющая) видео картинка (kmp.jpg)

  • для универсального воспроизведения в различных браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно, что и отражено строках для файлов в разных форматах: kmp.ogv, kmp.mp4, kmp.webm

 

 

 

 

 

Аudio на Web-странице (HTML5)

 

Аудио на Web-странице размещается с помощью тега <audio>  (требует поддержки данного тега браузером)

Для универсального воспроизведения в различных браузерах аудио кодируют с помощью разных кодеков (ogg и mp3) и добавляют файлы одновременно через тег <source>.

Синтаксис

<audio>
 <source src="URL">
 </audio>

Атрибуты тега <audio>:

 

autoplay

Звук начинает воспроизводиться автоматически после загрузки страницы.

controls

Добавляет панель управления к аудиоролику.

loop

Повторяет воспроизведение звука с начала после его завершения.

src

Указывает путь к воспроизводимому видеоролику.

Закрывающий тег обязателен.

Пример использования тега <audio>:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>kmp-audio</title>
 </head>
 <body>
  <p>kmp-музыка</p>
  <audio controls>
    <source src="audio/kmp.ogg" type='audio/ogg; codecs=vorbis'>
    <source src="audio/kmp.mp3" type="audio/mpeg">
    </audio>
 </body>
 </html>

 

 

 

 

 

CSS-анимация на Web-странице

 

CSS (Cascading Style Sheets) — каскадные таблицы стилей  — механизм добавления стиля в веб-документ.

Стиль - системная совокупность элеменотов оформления.

Таблица стилей - совокупность правил управления расположением и поведением элементов оформления страницы (шрифты, цвета и т.д).

Таблицы стилей могут быть внутренние (в коде HTML файла) и внешние (представляют собой файлы с расширением *.css.)

Анимация в CSS3 представляет собой изменение значения какого-либо свойства.

В CSS3 для задания CSS3 анимации используется свойство animation, содержащие запись различных свойств анимации:

  • animation-name — задает имя анимации

  • animation-duration — задает время проигрывания анимации

  • animation-timing-function — описывает метод расчета промежуточных значений свойств для анимации

  • animation-delay — задает задержку анимации

  • animation-iteration-count — задает количество циклов анимации

  • animation-direction — задает направление анимации

  • animation-play-state — определяет, проигрывается ли анимация или стоит на паузе...

Эти CSS3 свойства по разному поддерживаются  распространенными браузерами, поэтому они используются с вендорным префиксом (vendor-prefix).

Для Google Chrome и Safari: -webkit-

  • -webkit-animation-name — задает имя анимации

  • -webkit-animation-duration — задает время проигрывания анимации

  • ................................

 

 

 

 

Математика разметки с помощью CSS

 

 

 

«Easy Neatly»

Аккуратные таблицы стилей

http://www.siarion.net/rus/free/easyneatly/
 

 

 

 

Gif-анимация на Web-странице (древности)

 

 

 

 

 

Иллюзорная анимация

 

 

 

 

 

Программы создания анимации на HTML5

 

Hype (от Apple) – WYSIWIG-редактор для создания анимации, интерактивных веб-сайтов  с автоматической кодировкой в HTML5

Hype предоставляет:

  • тестовый редактор для корректировки вручную форм, текста и изображений.

  • Inspector для интегрирации HTML и CSS элементов в свои сайты

  • автоматический оптимизатор кода под максимально возможное количество браузеров.

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

Hype доступен только на Mac App Store. Основное требование - Mac OS X 10.6.6 или более поздняя версия.

Посмотрите значения и произношение "Hype" в LingvoUniversal (En-Ru)!

 

Adobe Edge (от Adobe) – WYSIWIG-редактор HTML5-анимации, аналогичной Flash, но основанной на стандартах HTML, JavaScript и CSS.

Adobe Edge позволяет:

  • добавлять анимацию к существующим документам без нарушения целостности дизайна и CSS-разметки.

  • с помощью привычных инструментов создавать с нуля визуально богатый контент с HTML5-элементами и стилями CSS3.

  • импортировать веб-графику в форматах SVG, PNG, JPG и GIF

  • настраивать стили с помощью CSS3.

  • использовать функции временной шкалы для создания анимации.

  • указывать и настраивать движения HTML-элементов в графическом режиме с высокой степенью точности.

Контент, создаваемый с помощью Edge, оптимизирован для работы в современных браузерах на мобильных устройствах Android, BlackBerry Playbook, iOS, HP webOS и других, а также в браузерах Firefox, Google Chrome, Safari и Internet Explorer 9.

 

21.11.2011

Swiffy  дополнение Google к пакету Adobe Flash Professional CS5, которое позволяет автоматически перевести Flash-анимацию из формата SWF в HTML5. Скачать дополнение можно с официального сайта в версиях для Windows XP/Vista/7 или Mac OS X 10.4+. Файл расширения Swiffy (.mxp) подключается к Adobe Flash Professional посредством Extension Manager. Затем в меню «Действия/Commands» появится пункт «Export to HTML5 (Swiffy)». Доступна также настройка сочетаний клавиш для ускоренного доступа к команде.

 

 

 

 

Конвертация Flash-анимации в видео для HTML5

 

 

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

  • Создать анимацию во Flash, разместив ее в корне таймлайна, не используя вложенных анимаций. Звуковая дорожка - тоже в корне.

  • Экспортировать анимацию в формат несжатого AVI.

  • С помощью Virtual Dub cжать AVI-файл, используя компрессор ffdshow.

  • С помощью Adobe Media Encoder конвертировать AVI-видео в формат mp4.

  • С помощью VLC конвертировапть AVI-видео в формат webM.

  • С помощью ffmpeg2theora конвертировапть видео в формат ogg (ogv).

  • Соединить все файлы в одной html-странице, воспользовавшись шаблоном на сайте : http://videojs.com/embed-builder/

Образец 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-видео еще нет, разные браузеры и платформы поддерживают разные кодеки.HTML5-

Для воспроизведения HTML5-видео требуется видео в трех форматах:

  • mp4 (кодек H.264) для iPad

  • OGG (кодек Ogg Theora / Vorbis) для Firefox

  • webM (кодек VP8) для Google Chrome

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

 

kmp