HTML5Rocks <video> tag tutorial

The HTML5Rocks team has published a tutorial on the HTML5 <video> tag. It includes clear explanations of the video formats supported by the various browsers and code snippets for supporting each in your pages. Check it out.

FFmpeg VP8 Decoder Implementation

When we started the WebM project, one of our goals was to promote rapid innovation in video technology through open development. Just two months after WebM debuted, Jason Garret Glaser, Ronald Bultje and David Conrad created a VP8 video decoder implementation for FFmpeg called ffvp8.

The ffvp8 implementation decodes even faster than the WebM Project reference implementation (libvpx), and we congratulate the FFmpeg team on their achievement. It illustrates why we open-sourced VP8, and why we believe the pace of innovation in open web video technology will accelerate.

WebM Semantic Video Demo

Brett Gaylor at WebMadeMovies has posted an HTML5 demo of popcorn.js, “a javascript library for manipulating open video on the web.” The demo plays a video while using semantic data in the video to trigger machine-translated subtitles, map lookups, Twitter feeds and other elements on the page. If you’re using a WebM-enabled browser the page serves a WebM video, otherwise it serves an Ogg or MP4 video depending on the browser's capabilities.

See Brett’s post or the popcorn.js wiki page for more info. You can also download the source from the Mozilla github repo.

Easy Tricks for Finding WebM Videos in YouTube

Since the WebM project launch, YouTube has been encoding videos uploaded at 720p or higher resolution in the WebM format. Today, the one million most popular videos of any size on YouTube are also available in the WebM format.

We have instructions on our project site for finding these videos but they require adding a special parameter onto the end of each search query. All of the browsers that support WebM can create search shortcuts with custom parameters, however, so we've compiled instructions for making it very simple to search for WebM videos in YouTube.

Important: First, make sure you have a supported browser and are enrolled in the YouTube HTML5 beta by going to http://youtube.com/html5 and clicking Enter the HTML5 Beta.

Creating a WebM Search Shortcut

Firefox 4 Beta:

1. Select Bookmarks > Organize Bookmarks. A bookmark manager dialog opens.
2. In the left column, choose a location for the new bookmark you’re creating. Next, choose Organize > New Bookmark (on MacOS click the gear icon). The new bookmark dialog opens.
3. In the Name box, type WebM.
4. In the Location box, type http://youtube.com/results?search_query=%s&webm=1.
5. In the Keyword box, type webm.
6. Click Add.

Google Chrome Early Release Channel:

1. On Windows and Linux, click the Chrome wrench icon in the toolbar and select Options. On MacOS, select Chrome > Preferences.
2. On the Basics tab, click the Manage button in the Default Search section.
3. On Windows and Linux, click Add. On MacOS X, click the plus (+) button.
4. In the Name box, type WebM.
5. In the Keyword box, type webm.
6. In the URL box, type http://youtube.com/results?search_query=%s&webm=1.
7. Click OK.

Opera 10.60 and later:

1. Go to http://youtube.com.
2. Right-click in the YouTube search box at the top of the page and select Create Search. On MacOS, use Ctrl+click if you don’t a secondary mouse button enabled.
3. In the Name box, type WebM.
4. In the Keyword box, type webm.
5. In the Address box, type http://youtube.com/results?search_query=%s&webm=1.
6. Click OK.

Now you’re ready to search. In the location box of the browser, type webm monster trucks. The YouTube search results page will open with a selection of monster truck videos encoded in the WebM format. When watching a video, look for the HTML5 WebM indicator in the player control bar.

If you can’t find WebM videos it is most likely a browser cookie problem. Your enrollment in the YouTube HTML5 beta test is stored in a browser cookie (not in your YouTube or Google account), and that cookie can expire. Visit http://youtube.com/html5 and opt-in again to re-set the cookie.

Directly Accessing WebM Videos by URL

To find out if any YouTube video is available in WebM, simply add &html5=True (make sure True is capitalized) to the end of the video URL. If there is a WebM version of the video, it will open instead of the Flash version. For example:

• Flash version: http://www.youtube.com/watch?v=Dz6gFokvOr0
• WebM version: http://www.youtube.com/watch?v=Dz6gFokvOr0&html5=True

NewTeeVee Guide to Playing WebM

Janko Roettgers at NewTeeVee has written a handy guide to playing WebM video on your system. Check it out.