CIRCUIT 2015 - Orchestrate your story with interactive video and web content

CIRCUIT – An Adobe Developer Event Presented by ICF Interactive

Orchestrate Your Story with Interactive

Video and Web Content

Presenter: Robb Winkle

[email protected]

About Me

•  Project Lead at ICF Interactive •  Working with CQ/AEM for 6 years •  Web Content Management consultant for

10 years

Overview

•  PopcornJS and the ButterJS editor •  Lessons Learned •  PopcornJS in AEM

Why PopcornJS

PopcornJS

•  https://www.ted.com/talks/ryan_merkley_online_video_annotated_remixed_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.

PopcornJS Example

PopcornJS Plugin Usage

PopcornJS GoogleMap 1 of 2

PopcornJS GoogleMap 2 of 2

ButterJS/Popcorn Maker

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

Popcorn and AEM

Newer is not always better

PopcornJS Features Used

•  Events – Play – Pause – Seeked – Ended

•  Plugin – Code

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

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

Questions?

Contact Information ROBB WINKLE [email protected] https://twitter.com/robbwinkle