HTML5 Video
What is HTML5 video
editMany of you are familiar with online video, such as YouTube, Vimeo, and Hulu. How about <video> ? What does it have to do with HTML5?
HTML
editHTML 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, Google Chrome, Internet Explorer, Opera, Safari, AOL, and others) converts this code into a page with text and a button.
Multimedia and HTML
editIn 1993, images were added HTML pages. Here's the original proposal for an <img> tag.
Many years later, discussions started about adding a <video> tag, too. Most online videos play in Adobe Flash or Windows Media Player or Quicktime. A YouTube video can be added to a blog and users can click to play or pause. But the 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.
Additional Libraries
editPopcorn.js is a free library that puts <video> to work without being too technical. You can see examples and documentation at http://popcornjs.org
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.