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

Vote for a YouTube user to Popcorn


By now, I hope you've had a chance to look at the ideas from our chat, and tried adding a picture to our example from P2PU.  If not, here are those links:

- http://new.p2pu.org/en/groups/interactive-open-video-with-popcornjs/content/chat-recap/

- http://new.p2pu.org/en/groups/interactive-open-video-with-popcornjs/content/popcorn-a-p2pu-video/

 

What's our next step?  I'm calling a vote to decide which YouTube channel could use some Popcorn interactive-ization by this class.  Although YouTube isn't open HTML5 video, we do have a Popcorn.js player which will make it possible to connect any plugin to it.

Here's three channels I'd like to suggest -- you're welcome to suggest others:

- Google Earth Outreach - maps and activism, some how-to videos http://www.youtube.com/user/EarthOutreach

- Mozilla - videos explaining the internet and open web - fairly sure Mozilla would let us convert a video to a truly open format and license - http://www.youtube.com/mozilla

- BBC Worldwide - clips from Top Gear - http://www.youtube.com/view_play_list?p=793CABDF042A9514

Task Discussion


  • Deiren   May 23, 2011, 3:33 a.m.

    Hi Nick and all,

    A question or two regarding video usage and popcorn javascript ( I'm just learning the fundamentals of javascript now)

    • Can you or someone give some detail, examples, about how you can start and stop videos at different points in it's time line.
    • I don't want to skip ahead too much before trying this task out but I was wondering about the code for pulling in multiple videos feeds and playing around with their start/ stop times.

    Thanks all,

    Deiren

  • Nicholas Doiron   May 23, 2011, 6:59 p.m.
    In Reply To:   Deiren   May 23, 2011, 3:33 a.m.

    There isn't a specific plugin for this -- you have to use your own JavaScript with Popcorn to control the video, for example, pausing when a button is clicked:

    var pop = Popcorn("#video").play();

    function pauseButtonClick(){

        pop.pause();

    }

    Putting together multiple video clips requires more of your own JavaScript.  You could create two Popcorn objects, and have the second video appear when you detect the first clip is over.  For example:

    // create first clip and start playing

     

    var pop = Popcorn("#clip1").play();

    // create second clip and hide it

    var pop2 = Popcorn("#clip2");

    document.getElementById("clip2").style.display="none";

    // start checking every 0.25 seconds for the right time to switch

    clip_1_to_2_after_10_seconds();

    // how that function works, below:

    function clip_1_to_2_after_10_seconds(){

       if(pop.currentTime() >= 10){

           // first clip is over, hide it and start up the second clip

           pop.pause();

           document.getElementById("clip1").style.display="none";

     

           document.getElementById("clip2").style.display="block";

           pop2.play();

       }

       else{

            // try this method again in 0.25 seconds

            setTimeout(clip_1_to_2_after_10_seconds,250);

       }

    }

  • Nicholas Doiron   May 17, 2011, 2:59 a.m.

    I put together an example of how we can use Popcorn with a video from Google Earth Outreach.  I'll be happy to put together one for Mozilla, too.

     

    On http://jsfiddle.net/tNhyt/46/  there are two plugins - Twitter and TagThisPerson.  They're simple but powerful.  The Twitter plugin just needs a Twitter name to show tweets, and the TagThisPerson plugin is a combination of a link to a photo and a link to a webpage.  So I can show this group'sTwitter feed and link to people involved in this project while you're watching the video.

     

    It'd be interesting to see someone using this for a video with more interviewees and more Twitter feeds.

  • Jay Henderson   May 20, 2011, 6:21 p.m.
    In Reply To:   Nicholas Doiron   May 17, 2011, 2:59 a.m.

    Nick is there a list of plug-ins available to play around with, I have an idea that would allow me to create interactive vide 404 templates and a few other ideas!! Let me know if there's a list of them that i can experiment with!!!

  • Nicholas Doiron   May 23, 2011, 6:46 p.m.
    In Reply To:   Jay Henderson   May 20, 2011, 6:21 p.m.

    A list of all of the available plugins is at https://github.com/annasob/popcorn-js/tree/0.6/plugins and the team is working on how to document and exhibit them.  Each folder has a readme-like explainer in the first .js file, and a basic example in the first .html file

  • AmandaRains   May 17, 2011, 2:24 a.m.

    The Google Earth Outreach is certainly rich with videos with all sorts of content that seem amenable to our project.

  • JONATHAN ARCHER   May 16, 2011, 8:04 p.m.

    Google Earth outreach seems to offer the most varied content for enhancing the video.