Статьи

Создание богатого видео опыта с Popcorn.js

Ноябрь 11, 2018

Учитывая то, насколько просто встраивать видео в веб-сайты, это чудо, что разработчики часто останавливаются на этом: простые старые встроенные видео. Что если бы вы могли создать для своего пользователя целый опыт, управляемый самим видео? С Popcorn.js вы можете сделать это — и эта статья научит вас, как это сделать.

Popcorn.js Основы

Давайте начнем с малого. Мы установим Popcorn.js, а затем быстро запустим пример «Hello World».

1. Создайте простую HTML-страницу

Мы начнем с создания файла index.html со следующим содержимым. .video div , где в конечном итоге появится наше видео. 

 <!doctype html> <html> <head> <title>Hello World Popcorn.js</title> </head> <body> <div class="video"></div> </body> </html>

2. Включите наши пользовательские стили

Далее, давайте включим некоторые основные стили для нашего проекта. Обновленный раздел заголовка предыдущей HTML-страницы показан ниже. 

 <head> <title>Hello World Popcorn.js</title> <style> .video, #map { width:300px; height:200px; float:left; } </style> </head>

3. Включите Popcorn.js

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

 <head> <title>Hello World Popcorn.js</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <style> ... </style> <script type="text/javascript" src="http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js"></script> </head>

4. Создайте и включите app.js

Далее, давайте создадим основной файл JavaScript для нашего приложения. Здесь мы инициализируем наш экземпляр Popcorn.js. Создайте app.js и app.js его в свой файл index.html . Содержимое app.js показано ниже. 

 // Wait for the DOM to load window.onload = function() { // Create popcorn instance from the YouTube video and insert it into the .video div var pop = Popcorn.youtube(".video", "http//www.youtube.com/watch?v=x88Z5txBc7w"); // Play the video automatically pop.play(); };

И обновленный раздел index.html показан здесь. 

 <head> <title>Hello World Popcorn.js</title> <style> ... </style> <script type="text/javascript" src="http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js"></script> <script type="text/javascript" src="app.js"></script> </head>

В app.js мы использовали метод youtube() объекта Popcorn для создания экземпляра видео из URL YouTube. Первый параметр — это селектор для нашего .video div . Здесь Popcorn.js будет вставлять наше видео. Второй параметр — это URL YouTube. В конце файла мы вызываем pop.play() который делает именно то, что говорит — он воспроизводит наше видео.

5. Свет, камера, экшн!

Чтобы убедиться, что проигрыватель YouTube работает правильно, нам нужно обслуживать эту страницу с сервера http:// , а не просто открывать файл в нашем браузере ( file:/// ). В Mac OS X это так же просто, как запустить следующую команду в каталоге вашего проекта. 

 python -m SimpleHTTPServer 2723

Теперь вы можете получить доступ к своему сайту по адресу http://localhost:2723 . Пользователи Windows могут рассмотреть Lighttpd или Mongoose .

Как только вы настроите свой HTTP-сервер, запустите страницу в своем браузере, и вы увидите, как Якко поет песню о странах мира! Далее мы будем использовать Popcorn.js для управления нашей страницей во время воспроизведения видео.

Направление вашей страницы с помощью Popcorn.js

Мы позволим нашему видео «направлять» DOM, запустив несколько пользовательских фрагментов JavaScript в определенных точках видео. Вы можете увидеть живую демонстрацию того, что мы в конечном итоге получим здесь:

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

1. Добавьте текстовый элемент h2 на страницу

В index.html добавьте следующую разметку в качестве body страницы. 

 <body> <h2>Yakko's singing about <span class="country-name">---</span></h2> <div class="video"></div> </body>

2. Обновите DOM

Мы будем использовать плагин кода для обновления DOM в определенные моменты времени во время видео. Сделайте следующие обновления в app.js Протестируйте страницу в вашем браузере. Когда видео достигает 20,2 секунды и Якко говорит «Соединенные Штаты», h2 должен сказать и Соединенные Штаты. 

 // When Yakko says United States, update the h2 pop.code({ start: 20.2, end: 20.7, onStart: function() { document.querySelector(".country-name").innerHTML = "United States"; } }); // Play the video automatically pop.play();

3. Отображение всех названий стран

Давайте добавим еще несколько стран и немного изменим код. Мы создадим список стран и их временные метки, а затем пройдемся по списку, вызывая метод code() для каждой страны. 

 ... // Set the h2 to the specified country name var setCountry = function(country) { document.querySelector(".country-name").innerHTML = country; }; // Countries List var countries = [ { start: 20.2, end: 20.7, country_name: "United States" }, { start: 20.7, end: 21.2, country_name: "Canada" }, { start: 21.2, end: 21.7, country_name: "Mexico" }, { start: 21.7, end: 22.2, country_name: "Panama" }, { start: 22.2, end: 22.7, country_name: "Haiti" }, { start: 22.7, end: 23.2, country_name: "Jamaica" }, { start: 23.2, end: 23.7, country_name: "Peru" } ]; // Loop through the countries countries.forEach(function(country) { // Call setCountry() at the start of each country's start time. pop.code({ start: country.start, end: country.end, onStart: function() { setCountry(country.country_name); } }); }); // Play the video automatically pop.play();

Откройте страницу в своем браузере и наблюдайте за изменением h2 когда поет Якко. Довольно круто, верно? Мы успешно использовали плагин кода Popcorn для обновления нашего DOM в зависимости от времени видео.

Примечание . Мы использовали цикл ECMAScript forEach () , но вы можете использовать jQuery или UnderscoreJS, если хотите.

Давайте оживим вещи с изображениями

У Popcorn довольно много плагинов . Есть плагины для Википедии, Facebook, Tumblr и других. Мы можем использовать плагин Flickr, чтобы показать некоторые изображения наших стран во время воспроизведения видео. Во-первых, нам нужно добавить div на нашу страницу для хранения фотографий: 

 ... <h2>Yakko's singing about <span class="country-name">---</span></h2> <div class=".video"></div> <div id="photos"></div> ...

Далее мы будем использовать плагин Flickr, который требует несколько параметров:

  • numberofimages — количество фотографий для загрузки с Flickr.
  • теги — поисковая фраза / теги, соответствующие изображениям.
  • высота и ширина — высота и ширина фотографий.
  • target — идентификатор div к которому нужно добавить фотографии.
  • начало и конец — окно, во время которого мы должны показать фотографии.

Для каждой страны используйте метод flickr() для поиска изображения флага страны: 

 ... // Loop through the countries countries.forEach(function(country) { // Call setCountry() at the start of each country's start time. pop.code({ start: country.start, end: country.end, onStart: function() { setCountry(country.country_name); } }); // Search Flick for "Country Flag" and add it to the #photo div pop.flickr({ start: country.start, end: country.end, tags: country.country_name + " Flag", numberofimages: 5, height: "100px", width: "100px", target: "photos" }); });

Перезагрузите страницу в своем браузере и посмотрите, как Popcorn.js загружает пять красочных изображений для каждой страны.

Обогащение опыта с другими библиотеками

До сих пор мы использовали несколько простых фрагментов кода и плагинов для обновления текста нашей страницы и добавления некоторых похожих изображений. Хотя плагины Popcorn.js великолепны, на самом деле нет предела тому, что вы можете делать с указаниями из вашего видео. Помня об этом, давайте воспользуемся JavaScript API Google Maps V3, чтобы воссоздать вихревой тур Якко на реальной карте!

1. Включите API Карт Google

Включите API Google Maps JavaScript на страницу HTML: 

 ... <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js"></script> <script type="text/javascript" src="app.js"></script> ...

2. Создайте div для хранения холста нашей карты.

Добавьте элемент div#map показанный в следующем примере. 

 ... <h2>Yakko's singing about <span class="country-name">---</span></h2> <div class=".video"></div> <div id="map"></div> <div id="photos"></div> ...

3. Инициализируйте карту Google

В своем файле app.js добавьте следующий код. Когда вы перезагрузите страницу, вы увидите, что карта в #map div довольно сильно уменьшена. 

 // Popcorn country code from earlier ... // Center the map on Chicago var center = new google.maps.LatLng(41.850033, -87.6500523); // Create a Road Map in the #map div var map = new google.maps.Map(document.getElementById("map"), { zoom: 1, // Zoom the map out really far center: center, mapTypeId: google.maps.MapTypeId.ROADMAP });

4. Добавьте маркер на карту

Давайте добавим маркер на карту, чтобы мы могли перемещать его, когда поет Якко: 

 ... // Add a maker to the map, placed at Chicago var marker = new google.maps.Marker({ map: map, position: center, visible: true });

5. Использование Google Geocoder

Теперь самое интересное. Мы собираемся использовать геокодер Google Maps, чтобы найти широту и долготу каждой страны, используя название страны. Сначала создайте экземпляр геокодера, как показано ниже. 

 var geocoder = new google.maps.Geocoder();

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

 ... // Set the current country var setCountry = function(country) { // Set the h2 to the specified country name document.querySelector(".country-name").innerHTML = country; // Geocode the country and move the marker geocoder.geocode({address : country}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { // Move the marker marker.setPosition(results[0].geometry.location); } }); };

Вы можете узнать больше об API Карт Google и геокодере на их странице документации . Для каждой страны, как часть функции setCountry() , мы геокодируем страну как адрес. Мы получаем результат с координатой LatLng которую мы используем для перемещения нашего маркера с помощью marker.setPosition() .

Финальный монтаж

Я надеюсь, что эта статья смогла показать вам лишь небольшой потенциал того, что Popcorn.js может предоставить богатые, управляемые видео интерфейсы для вашего сайта. Там все виды творческих приложений, просто ожидающих реализации. Я хотел бы видеть твою!

36
Share: