SlideShare ist ein Scribd-Unternehmen logo
1 von 11
css:manufaktur




                      An Introduction


                     JavaScript-Conference
            16th October 2012 in Düsseldorf
css:manufaktur
                                            Popcorn.js Demo
                                     JavaScript-Conference 2012 in Düsseldorf




     Web Developer

     Düsseldorf

     Twitter: @renaade

     Web:
      http://www.css-manufaktur.de
css:manufaktur
                                                Popcorn.js Demo
                                         JavaScript-Conference 2012 in Düsseldorf




     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/
css:manufaktur
                                             Popcorn.js Demo
                                      JavaScript-Conference 2012 in Düsseldorf




     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.
css:manufaktur
                                          Popcorn.js Demo
                                   JavaScript-Conference 2012 in Düsseldorf




     Create HTML5 website
      with video tag + unique ID

     Add your videos
      (at least OGG- and MP4-
      Format)
css:manufaktur
                                                           Popcorn.js Demo
                                                    JavaScript-Conference 2012 in Düsseldorf




     Bind popcorn.js in the
         <head>-area of the Website

    or
          put the file on your server,

          build your own version with the
           Build Tool
           http://mozillapopcorn.org/build-tool/.
css:manufaktur
                                                 Popcorn.js Demo
                                          JavaScript-Conference 2012 in Düsseldorf




     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
css:manufaktur
                                        Popcorn.js Demo
                                 JavaScript-Conference 2012 in Düsseldorf




     Insert an external video
      (Youtube or Vimeo)

     Use the appropriate
      Popcorn plugin
      (e.g. Youtube)
css:manufaktur
                                                      Popcorn.js Demo
                                               JavaScript-Conference 2012 in Düsseldorf




     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/
css:manufaktur
                                                    Popcorn.js Demo
                                             JavaScript-Conference 2012 in Düsseldorf




     HTML5 video tag
      http://popcorn.css-manufaktur.de/

     Youtube video
      http://popcorn.css-
      manufaktur.de/index2.html



      Both with a test case to keep
      Popcorn.js content of „container“ in
      fullscreen mode.
css:manufaktur
                                                                               Popcorn.js Demo
                                                                        JavaScript-Conference 2012 in Düsseldorf




       Project repository
        https://github.com/mozilla/popcorn-js

       Documentation
        http://popcornjs.org/popcorn-docs/index.html

       Roadmap
        https://mozillalabs.com/en-US/Popcorn/

       Demo Portfolio
        http://popcornjs.org/demos



       Talk at news:wired in 02/2012
        http://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

Weitere ähnliche Inhalte

Andere mochten auch

Baton Rouge Rehab Tailgate Party
Baton Rouge Rehab Tailgate PartyBaton Rouge Rehab Tailgate Party
Baton Rouge Rehab Tailgate PartyToddy Wobbema
 
U.S. Organic Popcorn Market. Analysis and Forecast To 2025
U.S. Organic Popcorn Market. Analysis and Forecast To 2025U.S. Organic Popcorn Market. Analysis and Forecast To 2025
U.S. Organic Popcorn Market. Analysis and Forecast To 2025IndexBox Marketing
 
Unique Popcorn Combinations
Unique Popcorn CombinationsUnique Popcorn Combinations
Unique Popcorn CombinationsPopcorn Maker
 
Popcorn and Politics
Popcorn and PoliticsPopcorn and Politics
Popcorn and PoliticsAaron Druck
 
Thanksgiving Ideas – 5 Kernels of Corn
Thanksgiving Ideas – 5 Kernels of CornThanksgiving Ideas – 5 Kernels of Corn
Thanksgiving Ideas – 5 Kernels of CornKen Sapp
 
Social Media Strategies Summit Las Vegas Case Study: How Garrett Popcorn Crea...
Social Media Strategies Summit Las Vegas Case Study: How Garrett Popcorn Crea...Social Media Strategies Summit Las Vegas Case Study: How Garrett Popcorn Crea...
Social Media Strategies Summit Las Vegas Case Study: How Garrett Popcorn Crea...Elly Deutch Moody
 
ABOUT POPCORNSESSIONS
ABOUT POPCORNSESSIONSABOUT POPCORNSESSIONS
ABOUT POPCORNSESSIONSmarabush
 
Marketing Strategy
Marketing StrategyMarketing Strategy
Marketing StrategyAfsha I
 
Kernel Pop Popcorn (direct & digital media marketing ppt)
Kernel Pop Popcorn (direct & digital media marketing ppt)Kernel Pop Popcorn (direct & digital media marketing ppt)
Kernel Pop Popcorn (direct & digital media marketing ppt)Naureen Ansari
 
Popcorn Fun Poems And Procedures
Popcorn Fun Poems And ProceduresPopcorn Fun Poems And Procedures
Popcorn Fun Poems And Proceduresmissjade12J
 
India Popcorn Market - Jan'14
India Popcorn Market - Jan'14India Popcorn Market - Jan'14
India Popcorn Market - Jan'14shushmul
 
Services Marketing
Services MarketingServices Marketing
Services MarketingNyssa Razzak
 
Managing Marketing channel
Managing Marketing channelManaging Marketing channel
Managing Marketing channelAnshuman Singh
 

Andere mochten auch (18)

The RKG Game
The RKG GameThe RKG Game
The RKG Game
 
Baton Rouge Rehab Tailgate Party
Baton Rouge Rehab Tailgate PartyBaton Rouge Rehab Tailgate Party
Baton Rouge Rehab Tailgate Party
 
Staff Training Presentation 2011 Final
Staff Training Presentation 2011 FinalStaff Training Presentation 2011 Final
Staff Training Presentation 2011 Final
 
U.S. Organic Popcorn Market. Analysis and Forecast To 2025
U.S. Organic Popcorn Market. Analysis and Forecast To 2025U.S. Organic Popcorn Market. Analysis and Forecast To 2025
U.S. Organic Popcorn Market. Analysis and Forecast To 2025
 
Unique Popcorn Combinations
Unique Popcorn CombinationsUnique Popcorn Combinations
Unique Popcorn Combinations
 
Pop corn responses s8 8 fn2013
Pop corn responses s8 8 fn2013Pop corn responses s8 8 fn2013
Pop corn responses s8 8 fn2013
 
Popcorn and Politics
Popcorn and PoliticsPopcorn and Politics
Popcorn and Politics
 
Popcornpowerpoint.1
Popcornpowerpoint.1Popcornpowerpoint.1
Popcornpowerpoint.1
 
Popcorn time (2015)
Popcorn time (2015)Popcorn time (2015)
Popcorn time (2015)
 
Thanksgiving Ideas – 5 Kernels of Corn
Thanksgiving Ideas – 5 Kernels of CornThanksgiving Ideas – 5 Kernels of Corn
Thanksgiving Ideas – 5 Kernels of Corn
 
Social Media Strategies Summit Las Vegas Case Study: How Garrett Popcorn Crea...
Social Media Strategies Summit Las Vegas Case Study: How Garrett Popcorn Crea...Social Media Strategies Summit Las Vegas Case Study: How Garrett Popcorn Crea...
Social Media Strategies Summit Las Vegas Case Study: How Garrett Popcorn Crea...
 
ABOUT POPCORNSESSIONS
ABOUT POPCORNSESSIONSABOUT POPCORNSESSIONS
ABOUT POPCORNSESSIONS
 
Marketing Strategy
Marketing StrategyMarketing Strategy
Marketing Strategy
 
Kernel Pop Popcorn (direct & digital media marketing ppt)
Kernel Pop Popcorn (direct & digital media marketing ppt)Kernel Pop Popcorn (direct & digital media marketing ppt)
Kernel Pop Popcorn (direct & digital media marketing ppt)
 
Popcorn Fun Poems And Procedures
Popcorn Fun Poems And ProceduresPopcorn Fun Poems And Procedures
Popcorn Fun Poems And Procedures
 
India Popcorn Market - Jan'14
India Popcorn Market - Jan'14India Popcorn Market - Jan'14
India Popcorn Market - Jan'14
 
Services Marketing
Services MarketingServices Marketing
Services Marketing
 
Managing Marketing channel
Managing Marketing channelManaging Marketing channel
Managing Marketing channel
 

Popcorn - lightly salted Mozilla's media toolkit for easy mashups

  • 1. css:manufaktur An Introduction JavaScript-Conference 16th October 2012 in Düsseldorf
  • 2. css:manufaktur Popcorn.js Demo JavaScript-Conference 2012 in Düsseldorf  Web Developer  Düsseldorf  Twitter: @renaade  Web: http://www.css-manufaktur.de
  • 3. css:manufaktur Popcorn.js Demo JavaScript-Conference 2012 in Düsseldorf  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/
  • 4. css:manufaktur Popcorn.js Demo JavaScript-Conference 2012 in Düsseldorf  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.
  • 5. css:manufaktur Popcorn.js Demo JavaScript-Conference 2012 in Düsseldorf  Create HTML5 website with video tag + unique ID  Add your videos (at least OGG- and MP4- Format)
  • 6. css:manufaktur Popcorn.js Demo JavaScript-Conference 2012 in Düsseldorf  Bind popcorn.js in the <head>-area of the Website or  put the file on your server,  build your own version with the Build Tool http://mozillapopcorn.org/build-tool/.
  • 7. css:manufaktur Popcorn.js Demo JavaScript-Conference 2012 in Düsseldorf  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
  • 8. css:manufaktur Popcorn.js Demo JavaScript-Conference 2012 in Düsseldorf  Insert an external video (Youtube or Vimeo)  Use the appropriate Popcorn plugin (e.g. Youtube)
  • 9. css:manufaktur Popcorn.js Demo JavaScript-Conference 2012 in Düsseldorf  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/
  • 10. css:manufaktur Popcorn.js Demo JavaScript-Conference 2012 in Düsseldorf  HTML5 video tag http://popcorn.css-manufaktur.de/  Youtube video http://popcorn.css- manufaktur.de/index2.html Both with a test case to keep Popcorn.js content of „container“ in fullscreen mode.
  • 11. css:manufaktur Popcorn.js Demo JavaScript-Conference 2012 in Düsseldorf  Project repository https://github.com/mozilla/popcorn-js  Documentation http://popcornjs.org/popcorn-docs/index.html  Roadmap https://mozillalabs.com/en-US/Popcorn/  Demo Portfolio http://popcornjs.org/demos  Talk at news:wired in 02/2012 http://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