Interactive Open Video with Popcorn.js

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

Popcorn a P2PU video

P2PU has a video which they'd like us to Popcorn-ify.  I used the example from our chat as a starting point.  It looks a little different because P2PU's video is on Vimeo.

http://jsfiddle.net/tNhyt/45/

The trick here would be choosing the right images to match with the P2PU video, to make it more visually compelling.  Adding an image is pretty easy -- you can copy the current image setup, and paste it immediately after.  For example:

    .image({
        // start at 1 second
        start: 1,
        // hide at 10 seconds
        end: 10,
        // link / URL to image
        src: 'https://www.drumbeat.org/media//images/drumbeat-logo-splash.png',
        // put between <div id="imagediv"> and </div>
        target: 'imagediv' 
    })

    .image({
        // start at 11 seconds
        start: 11,
        // hide at 14 seconds
        end: 14,
        // link / URL to image
        src: 'http://example.com/-Your-Awesome-Image.jpg',
        // put between <div id="imagediv"> and </div>
        target: 'imagediv' 
    }

If you come up with a video, or if you get stuck, post your work here and we'll see what we can do.

Task Discussion


  • Osledy Bazo   Dec. 1, 2011, 3:06 p.m.

    Im not sure if I need a specific version or browser but im trying the jsfiddles and nothing seems to work there

  • Nicholas Doiron   Dec. 1, 2011, 3:47 p.m.
    In Reply To:   Osledy Bazo   Dec. 1, 2011, 3:06 p.m.

    I went through and updated the examples in each lesson to use a newer version of Popcorn.js - that looks like it fixed the problem.

  • Osledy Bazo   Dec. 1, 2011, 3:51 p.m.
    In Reply To:   Nicholas Doiron   Dec. 1, 2011, 3:47 p.m.

    Thanks I can see them now

  • Deiren   May 15, 2011, 10:01 a.m.

    Hi Nick,

    Thought I should post my little trial for this task - I've not gone beyond 30 seconds because I started wanting to add in music and other elements which I wasn't prepped for yet - so keeping simply to a basic excercise of adding images I've just stopped at 30 seconds....anyway here's my link http://jsfiddle.net/Deiren/tNhyt/11/