CIRCUIT 2015 - Orchestrate your story with interactive video and web content
2 likes317 views
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.
CIRCUIT 2015 - Orchestrate your story with interactive video and web content
- 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
- 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.
- 8. PopcornJS GoogleMap 1 of 2
- 9. PopcornJS GoogleMap 2 of 2
- 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