Взгляд на попкорн

Сегодня мы собираемся взглянуть на Popcorn.JS , библиотеку от Mozilla, которая позволяет очень легко манипулировать веб-страницей на основе текущей позиции видео. Это позволяет вам создавать богатые «гипермедиа» впечатления от вашего видео контента.

С помощью Popcorn вы можете отображать информацию об актерах, которые в настоящее время находятся на экране, или показывать карты местоположений Google Street View в видео.

Взгляните на демонстрационную страницу, чтобы увидеть, чего мы добьемся — сочетание изображений, Google Maps, Википедии, тегов, RSS-каналов, Facebook и веб-контента — и все это в 22-секундном видеоролике.

О попкорне

Попкорн заставляет видео работать как интернет. Мы создаем инструменты и программы, которые помогают разработчикам и авторам создавать интерактивные страницы, которые дополняют видео и аудио богатым веб-контентом, позволяя вашим творениям жить и развиваться в Интернете.

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

popcorn.wikipedia({
    start: 12,
    end: 14,
    target: ‘wiki’,
    src: ‘http://en.wikipedia.org/wiki/Elizabeth_II’,
    title: ‘The Queen’,
    numberofwords: 40
});

Это тянет первые 40 слов со страницы Королевы Википедии в элемент с идентификатором wiki . Он появится на экране через 12 секунд и исчезнет через 14 секунд.

Вы также можете легко отобразить карту Google:

pop.googlemap({
    start: 10,
    end: 12,
    target: ‘map’,
    type: ‘ROADMAP’,
    location: ‘England’,
    zoom: 6
});

Это отображает Google Map of England в #map через 10 секунд и исчезает в 12. Вы можете установить настройку типа на HYBRID , ROADMAP , SATELLITE , STREETVIEW или STREETVIEW и отображать более точные карты, задав значения lat и lng (и для Street Просмотр, heading и pitch для более точных изображений).

Полный список параметров, доступных для плагина Google Maps, можно найти на сайте Popcorn .

Начиная

Создайте свою файловую структуру следующим образом:

|
|
|
|
|
|
|
|

HTML

Внутри index.html введите следующий базовый шаблон:

<!doctype html>
<html lang=»en»>
<head>
    <meta charset=»utf-8″>
    <title>A Look at Popcorn</title>
    <link rel=»stylesheet» href=»css/style.css»>
</head>
<body>
 
    <section id=»side»>
        <div id=»wiki»></div>
    </section>
 
    <section id=»main»>
        <video id=»demo_video» controls autobuffer>
            <source src=»vid/demo.webm» type=»video/webM»>
            <source src=»vid/demo.mp4″ type=»video/mp4″>
            <source src=»vid/demo.ogv» type=»video/ogg»>
        </video>
        <section id=»tags»></section>
    </section>
 
    <footer>
        <p>Demo created by <a href=»http://danharper.me»>Dan Harper</a> for <a href=»http://net.tutsplus.com/author/danharper»>Nettuts+</a>, using <a href=»http://mozillapopcorn.org»>PopcornJS</a>.</p>
    </footer>
 
    <script src=»js/popcorn.js»></script>
    <script src=»js/script.js»></script>
</body>
</html>

У нас есть простой шаблон HTML5 с section#side который мы будем использовать для отображения большей части контента из Popcorn. div#wiki будет использоваться для отображения данных Popcorn из Википедии — единственная причина, по которой он получает свой собственный элемент, — это помощь в стилизации.

section#main находится video : мы указали 3 формата видео:

WebM для Chrome, Firefox и Opera
MP4 для Safari и Internet Explorer
OGV для более старых версий Chrome, Firefox и Opera

Ниже видео находится section#tags где мы будем отображать «теги» с помощью Popcorn.

Непосредственно перед закрывающим </body> мы включаем файлы JavaScript.

CSS

Внутри вашего файла css/style.css добавьте следующие основные стили. Это довольно просто, и я не буду останавливаться на этом уроке:

body {
    font-family: sans-serif;
    color: #444;
}
 
a:link, a:visited {
    color: orangeRed;
    text-decoration: none;
}
 
a:hover, a:active {
    color: crimson;
    text-decoration: underline;
}
 
#main {
    width: 640px;
    float: left;
    margin: 0 0 0 10px;
}
 
#tags {
    border: 5px solid #eee;
    border-radius: 5px;
    padding: 5px 10px;
}
 
#tags a {
    line-height: 30px;
    vertical-align: top;
}
 
#side {
    border: 5px solid #eee;
    border-radius: 5px;
    height: 405px;
    width: 390px;
    float: left;
    overflow: hidden;
    padding: 10px;
    position: relative;
}
 
video, iframe {
    border-radius: 5px;
    border: 5px solid #eee;
    -webkit-background-clip: content;
}
 
#wiki a {
    color: #444;
    font-size: 20px;
}
 
#wiki a + p {
    margin: 5px 0 0;
}
 
#webpage {
    width: 100%;
    height: 460px;
}
 
#tags img {
    width: 30px;
    height: 30px;
}
 
footer {
    clear: both;
    font-size: 12px;
}

Картинки

Сохраните следующие файлы в каталог img/ — мы будем отображать их на странице с Popcorn:

(Изображения королевы и чашки чая находятся в свободном доступе. Этот красивый парень — я.)

Видео

Щелкните правой кнопкой мыши и сохраните следующие три видеофайла в папку vid/ . Это все одно и то же видео, сохраненное в трех разных форматах:

Vids / demo.webm

Vids / demo.mp4

Vids / demo.ogv

Popcorn также поддерживает видео с YouTube и Vimeo . Нажмите на ссылку для демонстрации плагинов.

Включить попкорн

Наконец, js/popcorn.js Popcorn в свой проект, сохранив следующее в js/popcorn.js :

http://popcornjs.org/code/dist/popcorn-complete.min.js

В производственной среде не рекомендуется включать полную библиотеку Popcorn со всеми плагинами, как мы делаем здесь. Вместо этого используйте Popcorn Build Tool, чтобы создать собственную версию библиотеки, используя только те плагины, которые вам нужны.

Получи Поппинг!

Внутри js/script.js есть следующее, чтобы начать работу с Popcorn:

document.addEventListener(«DOMContentLoaded», function() {
 
    var pop = Popcorn(‘#demo_video’, {
        pauseOnLinkClicked: true
    });
 
    pop.play();
 
});

Здесь мы создаем новый экземпляр Popcorn на #demo_video (идентификатор, который мы дали нашему элементу video ). Мы также pauseOnLinkClicked Popcorn аргумент pauseOnLinkClicked чтобы видео приостанавливалось, когда пользователь нажимает на ссылку.

Затем мы вызываем метод play() чтобы настроить Popcorn на автоматическое воспроизведение видео. Удалите эту строку, если вы предпочитаете ждать, пока пользователь явно нажмет кнопку «Воспроизвести».

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

Шаг 1: пометьте «Дэн Харпер»

Если вы снова посмотрите демонстрационное видео, вы заметите, что первое событие Popcorn, которое мы создали, это «тег» в 1 с, отображающий мое имя, ссылку и изображение. Давайте сначала создадим это, и мы добавим каждое событие по мере его появления в хронологическом порядке.

Для создания этого тега мы будем использовать встроенный в Popcorn плагин Tag This Person . Если вы посмотрите на страницу плагина, то увидите, что плагин принимает в качестве аргумента объект со следующими свойствами:

Start [число]: время запуска плагина
End [число]: время, когда вы хотите, чтобы плагин остановился
Target [string]: идентификатор элемента для отображения содержимого
Person [строка]: имя человека для тега
Изображение [строка]: URL-адрес изображения человека, помеченного тегом (необязательно)
Href [строка]: URL-адрес человека, помеченного тегом (необязательно)

Ниже pop.play(); добавить следующее:

pop.tagthisperson({
    start: 1,
    target: ‘tags’,
    person: ‘Dan Harper’,
    image: ‘img/danharper.jpg’,
    href: ‘http://danharper.me’
});

Работать с Popcorn действительно просто!

Вы заметите, что мы не указываем время end явно. Вместо этого Popcorn остановит плагин, когда видео закончится. (Лично я хотел бы, чтобы контент сохранялся после окончания видео, но Popcorn пока не предлагает эту функцию).

Взгляните на страницу в вашем браузере, и вы увидите, что мой тег появится в 1 с.

Шаг 2. Отображение логотипа Nettuts +

Через 2 секунды логотип Nettuts + отображается сбоку видео и исчезает через 10 секунд. Это так же просто, как пометить человека. Плагин « Изображение» позволяет отображать изображение внутри элемента.

Как и все плагины Popcorn, image принимает объект в качестве аргумента. image принимает следующие параметры:

Start [число]: время запуска плагина
End [число]: время, когда вы хотите, чтобы плагин остановился
Target [string]: идентификатор элемента для отображения содержимого
Src [строка]: URL изображения для отображения
Href [строка]: URL, чтобы сделать изображение ссылкой на (необязательно)
Текст [строка]: текст для наложения на изображение (необязательно)

Чтобы использовать этот плагин; добавьте следующее ниже .tagthisperson(…); событие:

pop.image({
    start: 2,
    end: 10,
    target: ‘side’,
    href: ‘http://net.tutsplus.com’,
    src: ‘img/nettuts.jpg’
});

Как видите, мы используем все доступные параметры, кроме text . Обновите свой браузер и попробуйте! Логотип должен отображаться на боковой панели от 2 до 10 секунд.

Шаг 3: Показать последние сообщения Nettuts +

Googlefeed — один из плагинов, который действительно продемонстрировал мне потенциал Popcorn. Присвойте ему URL для RSS-канала, и он будет отображать сообщения в небольшом виджете внутри указанного вами элемента.

В демо-ролике он отображается с интервалом 4 секунды и продолжается до отметки 10 секунд.

Googlefeed принимает следующие параметры для настройки:

Start [число]: время запуска плагина
End [число]: время, когда вы хотите, чтобы плагин остановился
Target [string]: идентификатор элемента для отображения содержимого
URL [строка]: URL-адрес RSS-канала для анализа
Заголовок [строка]: заголовок для отображения над каналом (необязательно)
Ориентация [строка]: вертикальная [по умолчанию] или горизонтальная (необязательно)

Имея в виду эти параметры, давайте добавим плагин к нашим событиям Popcorn:

pop.googlefeed({
    start: 4,
    end: 10,
    target: ‘side’,
    url: ‘http://net.tutsplus.com/feed/’
});

Так легко, правда?

Шаг 4: Давайте станем социальными

Плагин Facebook позволяет очень легко отображать социальные элементы из Facebook в определенное время в вашем видео. Например, в реальном примере вы можете пригласить своих зрителей в «Мне нравится» на Facebook или поделиться своими комментариями о шоу — и вывести окно на экран в режиме реального времени; как по волшебству;)

Этот плагин содержит множество опций, большинство из которых не соответствуют нашим потребностям — отображение поля «Мне нравится» — так что полный список опций можно найти на странице плагина на сайте Popcorn .

Однако нас интересуют следующие варианты:

Start [число]: время запуска плагина
End [число]: время, когда вы хотите, чтобы плагин остановился
Target [string]: идентификатор элемента для отображения содержимого
Введите [string]: LIKE [по умолчанию], LIKE-BOX , ACTIVITY , FACEPILE , LIVE-STREAM и т. Д. (Необязательно)
Href [строка]: URL страницы для лайка; по умолчанию текущая страница (необязательно)
Действие [строка]: должна ли кнопка «Мне like сказать «по умолчанию» или « recommend (необязательно)

Отобразите нашу кнопку «Мне нравится» на странице со следующим:

pop.facebook({
    start: 8,
    end: 10,
    target: ‘side’,
    href: ‘http://net.tutsplus.com’
});

Обновите страницу, и кнопка «Нравится» Facebook должна появиться через 8 секунд и исчезнуть с RSS-каналом и изображением Nettuts + через 10 секунд.

Это становится так просто, твоя бабушка может сделать это, верно?

Примечание. В ходе тестирования я обнаружил, что кнопка Facebook довольно темпераментна и иногда отображается до того, как она должна появиться или исчезает рано.

Шаг 5: На месте

Через 10 секунд мы хотим показать Google Map of England в течение 2 секунд. Как вы уже догадались, есть ~~приложение~~ плагин за это !

Плагин Google Maps позволяет отображать любую карту, которую позволяет API (Road, Satellite, Terrain, Hybrid или Street View). Возможны следующие варианты:

Start [число]: время запуска плагина
End [число]: время, когда вы хотите, чтобы плагин остановился
Target [string]: идентификатор элемента для отображения содержимого
Местоположение [строка]: адрес / местоположение для центрирования карты *
Широта [число]: широта для центрирования карты *
Lng [число]: долгота, чтобы центрировать карту на *
Введите [string]: HYBRID [по умолчанию], ROADMAP , SATELLITE , STREETVIEW или STREETVIEW (необязательно)
Zoom [число]: уровень масштабирования, по умолчанию 0 (необязательно)
Направление [число]: ориентация камеры в градусах относительно истинного севера (только просмотр улиц) (необязательно)
Шаг [число]: вертикальная ориентация камеры (только просмотр улиц) (необязательно)

* Вы должны указать либо location либо lat

Итак, давайте включим карту Англии на странице. Добавьте следующее в ваш скрипт:

pop.googlemap({
    start: 10,
    end: 12,
    target: ‘side’,
    type: ‘ROADMAP’,
    location: ‘England’,
    zoom: 6
});

Почему бы не попробовать некоторые другие варианты — например, увеличить конкретное здание в режиме просмотра улиц? Вот для начала:

pop.googlemap({
    start: 10,
    end: 12,
    target: ‘side’,
    type: ‘STREETVIEW’,
    lat: 50.844537,
    lng: -1.081544,
    zoom: 2,
    heading: 145,
    pitch: 1
});

Шаг 6: встретить королеву

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

Мы уже tagthisperson плагины tagthisperson и image , поэтому их реализация должна быть простой. Почему бы не попробовать сделать эти биты самостоятельно? Давай, я подожду.

Сделал это? Борясь? Или просто лень? Ну, вот ответ в любом случае:

pop.tagthisperson({
    start: 12,
    target: ‘tags’,
    person: ‘The Queen’,
    image: ‘img/queen-large.jpg’,
    href: ‘http://royal.gov.uk’
});
 
pop.image({
    start: 12,
    end: 14,
    target: ‘side’,
    src: ‘img/queen-large.jpg’
});

Теперь давайте посмотрим на плагин Wikipedia для Popcorn. Требуется несколько вариантов, чтобы указать, какой контент вы хотите, и сколько его:

Start [число]: время запуска плагина
End [число]: время, когда вы хотите, чтобы плагин остановился
Target [string]: идентификатор элемента для отображения содержимого
Src [строка]: URL отображаемой статьи в Википедии
Заголовок [строка]: установить произвольный заголовок для статьи (необязательно)
Numberofwords [число]: количество отображаемых слов, по умолчанию 200 (необязательно)
Lang [string]: язык, на котором написана статья (по умолчанию английский) (необязательно)

Имея в виду эти варианты, попробуйте создать этот бит самостоятельно. Название плагина — wikipedia .

pop.wikipedia({
    start: 12,
    end: 14,
    target: ‘wiki’,
    src: ‘http://en.wikipedia.org/wiki/Elizabeth_II’,
    title: ‘The Queen’,
    numberofwords: 40
});

Я устанавливаю пользовательский заголовок для статьи, так как я предпочел бы отображать заголовок «Королева» вместо «Елизавета II». Также обратите внимание, что мы установили target #wiki — как я упоминал ранее, это чисто для косметических целей.

Шаг 7: Чай?

Одним из последних кусков интерактивности в демоверсии является появление изображения чашки чая и нового тега «Чай» через 14 секунд и заканчивается через 16 секунд.

Поскольку мы уже использовали плагины tagthisperson и image несколько раз, я не буду объяснять этот код:

pop.tagthisperson({
    start: 14,
    target: ‘tags’,
    person: ‘Tea’,
    image: ‘img/cup-of-tea.jpg’,
    href: ‘http://en.wikipedia.org/wiki/Black_tea’
});
 
pop.image({
    start: 14,
    end: 16,
    target: ‘side’,
    href: ‘http://en.wikipedia.org/wiki/Black_tea’,
    src: ‘img/cup-of-tea.jpg’
});

На самом деле, почему бы не попробовать использовать плагин Popcorn’s Flickr для загрузки изображения чашки чая, вместо того, чтобы загружать локальный image с image .

Шаг 8: IFrames?

Наконец, в конце демонстрационного видео мы загружаем официальный сайт Mozilla Popcorn в #side в #side . Как и следовало ожидать, это достигается с помощью другого плагина Popcorn — веб-страницы . Этот плагин имеет всего несколько вариантов:

Start [число]: время запуска плагина
End [число]: время, когда вы хотите, чтобы плагин остановился
Target [string]: идентификатор элемента для отображения содержимого
Src [строка]: URL для отображения в iframe
Идентификатор [строка]: идентификатор, который вы хотите присвоить кадру (необязательно)

Таким образом, включение iframe на страницу так же просто, как:

pop.webpage({
    start: 16,
    target: ‘side’,
    src: ‘http://mozillapopcorn.org/’
});

Попкорн готов!

Загрузите страницу в своем браузере для финала — почему бы не взять пакет попкорна, чтобы насладиться шоу? (ха, ха)

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

Тестовые шоу могут использовать это, чтобы легко позволить зрителям играть в своем браузере, журнальные шоу могут пригласить вас присоединиться к ним в социальных сетях, таких как Facebook, Twitter или G +. Документальные фильмы могут отображать дополнительную информацию о том, что показывают.

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

Уже есть ряд проектов, включающих попкорн инновационным способом. Я не могу дождаться, чтобы увидеть, что ждет нас в будущем.

Экстра, Экстра! Прочитать все об этом!

В экосистеме Popcorn уже появляются несколько библиотек и дочерних проектов. У Mozilla есть альфа-стадия для создания контента Popcorn без необходимости писать код, который называется Popcorn Maker, который отлично подойдет для передовых режиссеров, желающих отправиться в эту новую браузерную страну в Интернете.

Другие проекты, как подробно описано на официальном сайте , включают в себя:

Instapoppin — удобный подход к созданию пользовательского интерфейса Popcorn с использованием только дополнительных атрибутов HTML
Seriously.js — библиотека эффектов WebGL для видео
Sequencer.js — объединяет несколько медиа-объектов в одну последовательность
butter.js — API, поддерживающий приложение Mozilla’s Popcorn Maker
Popcorn Kernel — простой веб-сервер для взаимодействия клиент-сервер Popcorn

Плагины

Полный список плагинов Popcorn можно найти здесь или для ленивых (я отметил те, что мы попробовали):

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