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

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