popcorn - lightly salted mozilla's media toolkit for easy mashups
DESCRIPTION
How to enrich a HTML5 video with content from the web.TRANSCRIPT
![Page 1: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/1.jpg)
css:manufaktur
Popcorn - lightly salted:Mozilla's media toolkit
for easy mashups
An Introduction
JavaScript-Conference 16th October 2012 in Düsseldorf
![Page 2: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/2.jpg)
css:manufakturPopcorn.js Demo
JavaScript-Conference 2012 in Düsseldorf
Renate Hermanns
Web Developer
Düsseldorf
Twitter: @renaade
Web: http://www.css-manufaktur.de
![Page 3: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/3.jpg)
css:manufakturPopcorn.js Demo
JavaScript-Conference 2012 in Düsseldorf
What is Popcorn.js?
Framework that enriches HTML5-based Media (video +
audio) with Web Content
Javascript-Library („The jQuery for Video“, Mozilla claims)
Open-Source (MIT License)
and Part of the Mozilla Popcorn Project http://mozillapopcorn.org/
![Page 4: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/4.jpg)
css:manufakturPopcorn.js Demo
JavaScript-Conference 2012 in Düsseldorf
What does it?Add web content to a
HTML5 media element (video, audio),
Add subtitles and footnotes to an existing video (your own, YouTube or Vimeo),
Controlling all Popcorn content by timeline, i.e. time based sequences.
![Page 5: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/5.jpg)
css:manufakturPopcorn.js Demo
JavaScript-Conference 2012 in Düsseldorf
How to use it? – 1st step
Create HTML5 website with video tag + unique ID
Add your videos(at least OGG- and MP4-Format)
HTML Code: body<video id="myvideo" checked="true" controls="controls" poster="poster.png">
<source src="sintel_trailer-480p.ogg" type="video/ogg"> <source src="sintel_trailer-480p.mp4" type="video/mp4">
</video>
![Page 6: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/6.jpg)
css:manufakturPopcorn.js Demo
JavaScript-Conference 2012 in Düsseldorf
How to use it? – 2nd step
Bind popcorn.js in the
<head>-area of the Website
or
put the file on your server,
build your own version with the Build Toolhttp://mozillapopcorn.org/build-tool/.
HTML Code: head
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js">
</script>
![Page 7: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/7.jpg)
css:manufakturPopcorn.js Demo
JavaScript-Conference 2012 in Düsseldorf
How you use it? – 3rd step
Create your custom script
Start with an event listener to know when the DOM is ready
Create a variable which holds the new popcorn instance
Add some plugin code
Custom Javascript:document.addEventListener('DOMContentLoaded',function()
{
var popcorn = Popcorn( "#myvideo" );
popcorn.footnote({start: 12,end: 30,text: “Hello World!",
target: "footnotediv“});
}, false);
![Page 8: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/8.jpg)
css:manufakturPopcorn.js Demo
JavaScript-Conference 2012 in Düsseldorf
How to use it? - Option
Insert an external video(Youtube or Vimeo)
Use the appropriate Popcorn plugin(e.g. Youtube)
JS Code: Youtube Pluginvar pop =
Popcorn.smart( '#container', "http://www.youtube.com/watch?v=DTpQxzejDXM" );
HTML Code: body<div id="container"></div>
![Page 9: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/9.jpg)
css:manufakturPopcorn.js Demo
JavaScript-Conference 2012 in Düsseldorf
Popcorn Maker
Produces Popcorn projects without coding
App in active development(currently version 0.5.2)
Version 1.0 is announced for November 2012
http://mozillapopcorn.org/popcorn-maker/
![Page 10: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/10.jpg)
css:manufakturPopcorn.js Demo
JavaScript-Conference 2012 in Düsseldorf
Test Pages
HTML5 video tag http://popcorn.css-manufaktur.de/
Youtube videohttp://popcorn.css-manufaktur.de/index2.html
Both with a test case to keep Popcorn.js content of „container“ in fullscreen mode.
![Page 11: Popcorn - lightly salted Mozilla's media toolkit for easy mashups](https://reader034.vdocument.in/reader034/viewer/2022051612/54bd60f14a7959f3178b45ed/html5/thumbnails/11.jpg)
css:manufakturPopcorn.js Demo
JavaScript-Conference 2012 in Düsseldorf
More Information
Project repositoryhttps://github.com/mozilla/popcorn-js
Documentationhttp://popcornjs.org/popcorn-docs/index.html
Roadmap https://mozillalabs.com/en-US/Popcorn/
Demo Portfoliohttp://popcornjs.org/demos
Talk at news:wired in 02/2012http://christianheilmann.com/2012/02/02/web-enabled-video-at-newsrewired/
My Article in German Linux Magazin (engl. version printed only)http://www.linux-magazin.de/Heft-Abo/Ausgaben/2012/04/Mediatoolkit-Popcorn