Robb Winkle presented on using PopcornJS, an open source JavaScript library, to create interactive and immersive media experiences within Adobe Experience Manager (AEM). He discussed PopcornJS and the ButterJS editor, lessons learned from converting a Popcorn Maker site to AEM, and ways PopcornJS has been used within AEM projects. Some suggested improvements included persisting timeline changes to components and adding read-only modes. Resources provided included code on GitHub and links to alternative timeline frameworks.

1. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Orchestrate Your
Story with Interactive
Video and Web
Content
Presenter: Robb Winkle
Robb.Winkle@icfi.com

2. About Me
• Project Lead at ICF Interactive
• Working with CQ/AEM for 6 years
• Web Content Management consultant for
10 years

3. Overview
• PopcornJS and the ButterJS editor
• Lessons Learned
• PopcornJS in AEM

4. Why PopcornJS

5. PopcornJS
• https://www.ted.com/talks/
ryan_merkley_online_video_annotated_re
mixed_and_popped
• Popcorn.js is a JavaScript library that
allows video, audio and other media to
control and be controlled by arbitrary
elements of a webpage.
• Combining open source web technologies,
authors can let their media be the
“conductor” of interactive and immersive
experiences.

6. PopcornJS Example

7. PopcornJS Plugin Usage

8. PopcornJS GoogleMap 1 of 2

9. PopcornJS GoogleMap 2 of 2

10. ButterJS/Popcorn Maker

11. Lessons Learned
• Doing things the right way
– Convert Popcorn Maker site over using clientlibs
and compile LESS into CSS as part of the build
– Creating services in Groovy to replace Node
services
• Alternative Path
– Copy and paste actual files to get it working
– Youtube API which was used became deprecated
in April 2015 but didn’t stop working until July
• Final Solution
– Rewrite the whole solution in a weekend 1.5
weeks before the presentation

12. Popcorn and AEM

13. Newer is not always better

14. PopcornJS Features Used
• Events
– Play
– Pause
– Seeked
– Ended
• Plugin
– Code

15. Improvements
• Persist timeline changes to the component
• Add read-only mode for Preview/Publish
• Use alternative timeline framework
– https://idflood.github.io/TweenTime/examples/
basic.html
– https://github.com/zz85/timeliner
• Create a browser plugin for the timeline
• Make action specific to component

16. Resources
1. Code can be found at
https://github.com/winklerj/popcorn-aem
2. PopcornJS http://popcornjs.org/
3. Butter/Popcorn Maker
https://popcorn.webmaker.org/
1. Source -
https://github.com/mozilla/
popcorn.webmaker.org
4. CHAPS – Timeline Library
https://almende.github.io/chap-links-library/
timeline.html

17. Questions?
Contact Information
ROBB WINKLE
Robb.Winkle@icfi.com
https://twitter.com/robbwinkle