Федерико был одним из тех людей, которые всячески поддерживали существование и развитие специализированной ISDN (Integrated Services Digital Network — цифровая сеть с интеграцией служб, которая позволяет совместить услуги телефонной связи и обмена данными) линии, поэтому я и решил позвонить именно ему. Потребовалось шесть часов томительного ожидания (которое периодически сопровождалось безумными приступами проклятий). Но это того стоило, ведь я только что увидел 60 секундный рекламный ролик оригинального Macintosh TV в Firefox, и я срочно должен был сказать кому-то об этом. Мой мозг был на грани взрыва.

Качество видео роликов в интернете довольно ощутимо улучшилось, особенно по сравнению с первой рекламой в низком разрешении, которую я смотрел на моем Quadra 605 еще в 7-м классе. Но по большей части, видео по-прежнему отделено от интернета, блокировано i-фреймами и Flash, и отображается в области маленьких окон в центре страницы. Игнорирование преимуществ видео влечет за собой потерю веб-дизайнерами огромных возможностей .

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

Когда видео выходит за рамки ограничений.

Видео в сочетании с анимацией является мощным инструментом для создания инновационного и оригинального опыта пользовательского взаимодействия с веб-сайтом. Представьте себе интерактивные видеоролики и учебные пособия, в которых элементы DOM (стандарт консорциума WWW, определяющий способы манипулирования объектами и изображениями на одной веб-странице) организованы в поток и перемещаются в пределах страницы синхронно с преподавателем. Почему бы не совместить видео с анимацией, чтобы привлечь новых пользователей для своего приложения? Или как насчет размещения видео на маркетинговой странице вашего продукта вместо статического изображения в JPEG формате? Можно легко увлечься — при отсутствии осторожности видео может повлечь за собой появление сложных тегов. Но существует множество красивых, вдохновляющих примеров видео, которое интегрировано в дизайн.

Новая маркетинговая страница Apple для Mac Pro — это потрясающий пример того, как видео может выйти за рамки ограничений и органично дополнить остальной контент. Новый Mac Pro показан в центре страницы, а при прокрутке вы сможете увидеть все его составные части. Общая картина дополняется описанием всех структурных элементов, которые вы видите перед собой.

Статический скриншот новой целевой страницы не дает должным образом оценить все преимущества нового Mac Pro. (Увеличенная версия).

Еще один замечательный пример использования интерактивного видео можно увидеть на Soundslice, созданном Адрианом Холовэти. Soundslice наполнен видео из YouTube, нарезками музыки и табулатурами (или вкладками) с пояснениями, которые гитаристы используют, чтобы научиться играть мелодию.

Музыкальные панели в нижней части окна синхронизированы с видео. (Увеличенная версия).

Когда вы смотрите музыкальное видео, панели в нижней части окна двигаются в такт музыке и вы можете проигрывать ту же мелодию на своей гитаре. Вы можете даже замедлить воспроизведение видео или организовать повтор для практического освоения сложных участков. Движение панели по-прежнему будет синхронизировано.

Как Добавить видео в проект?

Если вы хотите рискнуть и добавить видео или анимацию в свой следующий проект, то у вас будет не так уж много способов для реализации этой идеи. Для подобных случаев не существует каких-то общепринятых подходов. Также не существует простой в использовании библиотеки с открытым исходным кодом, которая позволила бы синхронизировать видео с анимацией. Поэтому каждая реализация будет уникальной и не похожей на остальные случаи. Может быть вы захотите воспользоваться JavaScript анимационной библиотекой или CSS keyframes и переходами? Вы планируете самостоятельно обслуживать видео, а может вы хотите воспользоваться преимуществами событий HTML5 video тега или использовать YouTube или Vimeo? А как именно вы планируете связать анимацию и видео?

Вместе мы постараемся найти ответы на вышеупомянутые вопросы и не только. Мы создадим наш собственный микро JavaScript фреймворк. Charlie.js предоставляет собой простой в использовании API (интерфейс программирования приложений) для создания страниц с синхронизацией видео и CSS3 анимации.

Библиотека Charlie.js названа в честь Чарли Чаплина. (Источник изображения).

Лучший способ чему-то научиться – это приступить к практическому освоению, так что давайте начнем.

Какие возможности у Charlie.js?

Нам нужна возможность создавать анимацию, а затем в какое-то установленное время вызывать её в видео. Нам также нужно иметь возможность синхронно останавливать анимацию, если останавливается видео. Также необходим способ обрабатывать пользовательские переходы в различные периоды видео.

Чтобы ограничить рамки этой статьи, мы рассмотрим использование Charlie.js только для CSS анимации. Анимационные JavaScript библиотеки являются более гибкими и мощными, чем CSS анимация, но CSS легче упаковывать, имеется декларативный синтаксис ключевых фреймов и можно реализовать эффекты с аппаратным ускорением. Использование только лишь CSS анимации – это хороший выбор для малых проектов.

Для простоты Charlie.js будет поддерживать только одно видео на странице.

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

Определение API.

Для нашего маленького фреймворка сначала нужно определить API. Другими словами, мы должны выяснить, как другой человек будет использовать библиотеку, а затем написать JavaScript код для реализации API.

Видео и анимационная библиотека может работать по-разному, но основная задача заключается в поиске способа синхронного воспроизведения видео и анимации. Как разработчику указать, какие анимации должны появиться в определенных областях, и в какое время они должны начаться в видео?

Одним из вариантов является использование данных в JSON или XML. Противоположное решение заключается в отказе от отдельных файлов данных и создании конфигурации на основе вызовов JavaScript функций. Все это хорошо, но существует и другое решение, которое является чем-то средним между первым и вторым способом.

Обычно CSS анимация инициализируется в таблице стилей. В идеале, она таким же образом должна быть определена и для Charlie.js, а не в файле JSON. В этом есть смысл, и следование общепринятым принципам имеет свои преимущества. Когда анимация инициализирована в таблице стилей, а не в JavaScript или JSON файле, то вы можете проверить её работоспособность без необходимости загружать всю видео и анимационную библиотеку.

Анимация прикрепляется к элементу с атрибутами данных. Атрибуты данных определяют имя анимации, а также устанавливают время начала операции.

Допустим, у вас есть CSS анимация с именем fade для уменьшения непрозрачности (способность объектов на данном слое закрывать объекты на других слоях, более удалённых от точки наблюдения), и другая анимация с именем fling для перемещения элементов со страницы. И вы хотите расположить на странице тег div, который позволит использовать трехсекундную анимацию в видео. Ваша разметка будет выглядеть следующим образом:

<div class="charlie" data-animations="fade, fling" data-times="3, 3">
...
</div>

Charlie.js увидит эту команду и будет знать, что необходимо запустить fade и fling анимации после того, как пройдет три секунды видео.

Анимации fade и fling определены в таблице стилей, которая связана с документом.

Анимация fade может выглядеть следующим образом (в этом случае исключены браузерные префиксы, но их необходимо использовать для Chrome и Safari):

.fade {
	animation-name: fade;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes fade {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

Класс .fade – это то, что Charlie.js относит к анимированным элементам, которые будут приводить в действие fade анимацию.

Видео хосты: HTML5 в сравнении с Flash и Silverlight.

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

Видео, вставленное с помощью Flash или Silverlight, будет представлено с ограниченными вариантами оформления, поэтому сервис видео-хостинга в идеале должен поддерживать HTML5 video тег. Тег video легче стилизировать и перемещать по странице. Вы можете применять CSS фильтры, преобразования и даже использовать CSS анимацию на самом видео. Кроме того, стандартные информационные события являются довольно надежными и позволяют получить множество мест и способов подключения вашего кода к видео. Большой недостаток тега video – это совместимость. Он не работает в Internet Explorer 8.

Какие же виды видео-хостинга должен поддерживать Charlie.js? Построение библиотеки, которая поддерживает несколько вариантов хостинга, является вполне возможным. Например, Popcorn.js (потрясающая библиотека для синхронизации контента с видео) поддерживает несколько вариантов хостинга и API. Но для сохранения общей простоты, наша маленькая библиотека будет поддерживать только vanilla video тег. Все, что встроено в i-фрейм или Flash контейнер не будет поддерживаться.

Это хорошо для Charlie.js, но что делать, если вы застряли поддержки старых браузеров и приходится иметь дело с видео чучела в i-фрейме? Большинство видео-хостинг компаний имеют неплохие API. По крайней мере, вы должны быть в состоянии использовать эти API для синхронизации анимации. Вам просто необходимо научиться работать со встроенным Flash объектом. YouTube и Vimeo являются самыми популярными сервисами и оба предлагают обширный API. Wistia еще один замечательный вариант, но менее известный.

Если вы хотите использовать video тег, но не хотите самостоятельно размещать видео, взгляните на Vid.ly. После того как вы загрузите видео, Vid.ly будет кодировать его в любом подходящем для вас формате. Кроме того вы получите универсальный URL, который можно использовать в файле video тега и который будет автоматически выбрать правильный тип видео в соответствии с пользовательским агентом.

<video id="video" src="http://vid.ly/4m4e2n?content=video" controls="" preload="none">
Your browser does not support the HTML5 video element.
</video>

Будьте внимательны!

В большинстве примеров с фрагментами JavaScript кода используется символ подчеркивания; такие элементы, как _.forEach _.toArray являются сервисными функциями из этой библиотеки. Подчеркивание воплощает функциональный стиль программирования, который может показаться немного странным, особенно, если вы никогда не видели его раньше. Однако потратив немного времени на изучение основных особенностей подчеркивания, в будущем вы сможете ускорить свою работу и уменьшить количество строк кода. Над этим стоит поработать. В этой статье все фрагменты программного кода сопровождаются комментариями из которых вы сможете понять, какие именно действия выполняются и которые достаточно просты для понимания.

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

Управление CSS анимацией с помощью JavaScript.

JavaScript является связующим звеном между видео и CSS анимацией. Способа соединить анимацию и видео только лишь с помощью CSS, пока не существует. Анимация не начнет работать пока не будет принят стиль, а CSS дает вам достаточно много способов вызова дополнительных стилей (например, :hover). Для того чтобы синхронизировать анимацию и видео, нам нужно будет создать события паузы, остановки, возобновления, перехода к середине и даже обратного хода.

Все это можно сделать с помощью JavaScript. Итак, первый шаг состоит в том, чтобы получить CSS анимацию из таблицы стилей и в JavaScript. Каждая CSS анимация состоит из двух частей. Первая часть представляет собой ключевой кадр и свойства, используемые для настройки поведения анимации, например, продолжительности, количества повторений и направления. Вторая часть – это настройка вызова анимации. Библиотеке Charlie.js нужно будет найти обе эти части в таблицах стилей.

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

findRules = function(matches){

		//document.stylesheets is not an array by default.
		// It's a StyleSheetList. toArray converts it to an actual array.
		var styleSheets = _.toArray(document.styleSheets),
		rules = [];

		// forEach iterates through a list, in this case passing
		//every sheet in styleSheets to the next forEach
		_.forEach(styleSheets, function(sheet){

		//This foreach iterates through each rule in the style sheet
		//and checks if it passes the matches function.
		_.forEach(_.toArray(sheet.cssRules), function(rule){
			if (matches(rule)){
				rules.push(rule);
			}
		});
	});
return rules;
}

Функция findRules перебирает каждое правило в каждо …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров