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 

Tell us what you know about <video>

Many of you are familiar with online video, such as YouTube, Vimeo, and Hulu.  How about <video> ?   What does it have to do with HTML5 and Popcorn.js?  I am going to write a screamingly fast summary, and you can fill in what you know.

HTML is the basis of almost every page on the internet.  For example, if I were writing the homepage to my first website, I would write:

<html>
<body>
    <p>Welcome to My Website</p>
    <input type="button" value="Click this Button" />

</body>
</html>

The web browser (Firefox, Chrome, Internet Explorer, Opera, Safari, and others) converts this HTML into a page with a paragraph and a button.

In 1993, we added images to HTML pages.  Here's the original proposal for an <img> tag.

Many years later, discussions started about adding a <video> tag, too.  You could watch a video online, but it would play in Adobe Flash or Windows Media Player or Quicktime.  I can see a YouTube video on a blog and click to play or pause.  But my web browser only sees ("show Adobe Flash here").  I compare this to getting a scanned PDF.  You can see it, but the computer can't.  So you can't copy-paste, or search, or add up a column of numbers, or click links, or reply to an e-mail address.

HTML5 is a set of new tags and functions for HTML. Open-source web browsers were the first to explore running audio and video on their own, inside new <audio> and <video> tags.  This makes it possible to access and edit the media directly, make your page interact with the video, create different-shaped frames, and many other cool tricks.

Popcorn.js is a library that puts <video> to work without being too technical.  You create events such as: 10 seconds in, show a map of Paris; 20 seconds in, show my Flickr photos; add subtitles that can be translated to the viewers' language...  The WebMadeMovies project has developed a few demos that you'll see in the next few days, and we hope it'll inspire you to make your mark on this new technology.

Task Discussion


  • Nicholas Doiron   Oct. 5, 2011, 11:40 a.m.

    DiveIntoHTML5.com has gone offline.  Try http://diveintohtml5.info/

  • lernantatron   Oct. 5, 2011, 12:02 p.m.
    In Reply To:   Nicholas Doiron   Oct. 5, 2011, 11:40 a.m.

    http://meyerweb.com/eric/thoughts/2011/10/04/searching-for-mark-pilgrim/

  • (aleb   July 1, 2011, 1:26 p.m.

    Video can now be amazing with Popcorn.js. In the past, I would use the Smart YouTube plugin for my Wordpress blogs and all I had to do was to add a vh after the http so I didn't have to embed the video. But HTML5, along with Popcorn.js opens up a world of possibilities.

  • Rusty   June 23, 2011, 1:48 p.m.

    I'm excited to learn more about popcorn.js. I think there is so much potential that has been overlooked simply because using flash really isolated any use of video in connection with the other readable elements in the HTML it's embedded in.

  • AmandaRains   May 10, 2011, 11:04 a.m.

    I'm currently using a 6 year old Sony Handycam to shoot video.  I have a lot to learn about shooting video. Robert Rodriguez is my inspiration - his 15 minute film schools are great. I clearly have a lot to learn about shooting video.  I'm currently learning Final Cut Express on my MacBook. Again I have a great deal to learn.  I have been successful in making a few test vids.  Right now I'm trying to figure out how best to export in a format that can be viewed in a web page.  Just learned there is a difference between "streaming video" and "progressive downloading video". That all leads to some interesting sets of options to consider.  This PopCorn and Butter thing looks interesting so I'll be exploring that as well.

    -Amanda

     

     

  • Michael McCarthy   May 2, 2011, 6:14 p.m.

    I was just thinking about how inspiring it is to think about the first uses of <img> tags. As an end-user I have always taken for granted the pains so many have taken to make this resource a usable an aesthetic resource.

    Video can see the same value created, and more! I'm tracking right along. Lets get this thing on the road!

  • Deiren   May 2, 2011, 2:56 p.m.

    What I know of <video> comes from Mark Pilgrims book "Dive into HTML5" http://diveintohtml5.org/video.html  

  • Nicholas Doiron   May 3, 2011, 12:05 a.m.
    In Reply To:   Deiren   May 2, 2011, 2:56 p.m.

    "Dive into HTML5" has the best and most up-to-date information on who supports HTML5 video and the best way to set it up on your website, but it's a little too detailed and technical for most of the people in this course, I think.

    If you check it out, keep in mind that the technical mumbo-jumbo boils down to a single recommendation, one which we will be passing on to you.  The best practice is to use a mix of open formats, and the user's computer will select the right one to play.  If you're pressed for space or time, an OGV video works on most Firefox and Chrome browsers.

  • Amy Donahue   April 20, 2011, 9:49 a.m.

    I knew nothing about <video> and so found the summary fascinating and am even more excited to be in this class!  I do know html tags can have attributes, so I guess my one contribution is the question what attributes will this tag have?

  • lernantatron   April 20, 2011, 10:59 a.m.
    In Reply To:   Amy Donahue   April 20, 2011, 9:49 a.m.

    There is a simple "Video for Everyone" generator at this page where you can paste in the most common attributes and parameters of a typical use of <video> including fallbacks:

    http://sandbox.thewikies.com/vfe-generator/

    Copy the code to the clipboard and paste it into the HTML panel of a new fiddle at jsfiddle.net. Here is an example to start with that additionally added the popcorn library as a resources and a <div> to hold popcorn generated results:

    http://jsfiddle.net/dandiebolt/kU42g/

  • justinstoller   April 19, 2011, 8:29 p.m.

    Honestly, I know a decent amount of Javascript and have been using Html and a good amount of the Html5 elements and attributes, but I have yet to use the <video> tag.

    I vaguely remember a controversy about who was supporting which standard of video, with YouTube and Google originally supporting a standard that FF wouldn't play. I know Chrome has since added support for all formats and FF supports Ogg and Safari/IE support Mpeg4.

    And that, unfortunately, is everything I know about <video>.

  • Nicholas Doiron   April 20, 2011, 11:35 a.m.
    In Reply To:   justinstoller   April 19, 2011, 8:29 p.m.

    Last month that got a little more complicated, with Google dropping support for a format in their Chrome browser, and Microsoft making a plugin to add it back.

    There's plenty of debate over which format makes sense in the long run.  In the P2PU Webcraft world, we're going to suggest using a mix of open formats to work with most web browsers.  Popcorn.js also can work with YouTube and Vimeo if needed.