HTML5 Video

From Wikiversity
Jump to navigation Jump to search

What is HTML5 video[edit]

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?


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, Google Chrome, Internet Explorer, Opera, Safari, AOL, and others) converts this code into a page with text and a button.

Multimedia and HTML[edit]

In 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[edit]

Popcorn.js is a free library that puts <video> to work without being too technical. You can see examples and documentation at

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.