DiveIntoHTML5.com has gone offline. Try http://diveintohtml5.info/
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:
<p>Welcome to My Website</p>
<input type="button" value="Click this Button" />
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.