Статьи

Безболезненно смешивайте медиа и потоки данных с новым Popcorn 1.0 от Mozilla

Январь 31, 2019

Mozilla недавно выпустила версию 1.0 своего нового JavaScript-фреймворка для носителей HTML5 под названием Popcorn .

Вы можете подумать: «Я знаю все о HTM15; Я могу нормально взаимодействовать со СМИ ». Возможно, но Popcorn стремится сделать HTML5-медиа действительно простым в использовании.

Например, предположим, что вы демонстрировали документальный фильм (или коммерческую рекламу!) О Нью-Йорке и хотели, чтобы ваши пользователи видели текущие цены на отели в округе в настоящее время на экране. Youtube предоставляет эту функцию с привязкой по времени, но эти ссылки появляются в самом видео, а затем вы привязываетесь к Youtube. Но синхронизировать ваши запросы ссылки от видео к потоку данных вне видео может быть сложно или, по крайней мере, раздражает.

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

Popcorn.js использует нативные свойства, методы и события HTMLMediaElement, превращает их в простой в освоении API и предоставляет систему плагинов для взаимодействия с сообществом.

Popcorn имеет десятки плагинов для общих сервисов и API, от Twitter до карт, медиа-событий и многого другого. Но если он не делает то, что вам нужно прямо сейчас, вы можете быстро и легко написать свои собственные плагины.

Мы вернемся к плагинам позже. Но для ленивого, но энергичного кодера, вот как легко вставить текстовую сноску в определенный временной интервал в видео с помощью Popcorn.js:  

   var pop = Popcorn("#ourvideo");

         // add a footnote at 2 seconds, and remove it at 6 seconds
         pop.footnote({
           start: 2,
           end: 6,
           text: "Pop!",
           target: "footnotediv"
         });

Это так коротко, это не просто. Миллион обезьян мог написать этот JavaScript случайно.

Но Popcorn.js открывает гораздо больше дверей, чем события с временным ключом. Чтобы понять, что я имею в виду, найдите несколько минут, чтобы просмотреть интерактивный документальный фильм « Одна миллионная башня », созданный с помощью Popcorn и премьера которого состоялась на Wired.com. Первое, на что стоит обратить внимание: трехмерная модель высотного проекта берет свою погоду из фактических погодных условий Торонто. Таким образом, это обратное извлечение времени из видео: оно помещает данные о погоде в рендеринг WebGL. Конечно, выполнимо без попкорна, но очень просто с ним.

API крошечный, но довольно специфичный. Посмотрите здесь , если вы просто хотите развиваться с Popcorn. Но Mozilla сделала проект полностью открытым исходным кодом, и открытые запросы на ваше участие разбросаны по всему сайту разработчиков Popcorn — так что подумайте и об источнике .

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

  • OpenMap
  • Код
  • facebook
  • Googlefeed
  • Linkedin
  • Lowerthird
  • Плагин паузы
  • Processing.js
  • График
  • Отметить этого человека
  • Ласт фм
  • Образ
  • Википедия
  • Страница в Интернете
  • Flickr
  • Google Map
  • щебет
  • GML
  • Усы
  • Wordriver
  • приписывание
  • подзаголовок

Некоторые из них очень практичны (Атрибуция), другие просто кричащие (Wordriver отображает периодически исчезающую строку текста). Обратите внимание, что многие из этих плагинов специально разработаны для того, чтобы разрушить («четвертую») стену между аудиовизуальным представлением мира и прямым веб-доступом к вещам о реальном мире.

Идея не нова, но теперь это легко.

Следуйте за восхитительным маслянистым ароматом на заставке (которая включает в себя несколько хорошо сделанных промо-видео) или на сайте разработчика (тихий, JavaScript-серый). Или прочитайте документацию в сыром виде (которая, вы, возможно, не удивитесь, узнав, не решает специфические для iOS проблемы с аудио / видео HTML5), но, возможно, сначала запустите несколько демонстраций, чтобы увидеть, что Popcorn может помочь вам сделать.

 

Обновление: RAMP объявил о своей официальной поддержке Popcorn.js на фестивале Mozilla в Лондоне на прошлой неделе. Похоже, значительное одобрение со стороны крупного игрока в оптимизации веб-контента. 

34
Share: