Adding video to your website using the new HTML5 video tag

HTML5, currently under development, offers many more features and possibilities for developers than existing HTML markup. HTML5 is not some big change, it is merely new features and possibilities available that does not require existing markup to be thrown away. And best yet, HTML5 is already supported!

HTML5 has introduced several new elements including a <video> element. Embedding video without a third-party plugin used to be impossible. Now, with the new <video> element, we can easily embed video using the <video> tag.

You’ll first see how to create a simple web site. You’ll then add the simple <video> tag, and then you’ll learn how to encode your video to be compatible across multiple browsers.

Create a new website using WebMatrix

If you need help downloading and installing WebMatrix, it may be a good idea to read Getting Started with WebMatrix. The article provides step by step instructions on installing WebMatrix

WebMatrix gives you a number of different ways that you can create a new web site. You can use an existing open source application such as WordPress, Joomla, DotNetNuke or Umbraco, or you can create a site yourself by either coding everything or by using a small, simple template. For this example, we will be using an empty site template.

On the WebMatrix welcome screen, you will see all the different options you have for creating a website. Click “Site From Template.”

Here you will see all different templates given to you with WebMatrix. Choose the “Empty Site” template, give it a name and click OK.

Clicking ok will take you to your WebMatrix workspace. This contains information about your local host as well a provides resources on developing your site.

You’ll notice that WebMatrix allows you to move between different workspaces by selecting the buttons on the left hand side. At present the Site button is selected which gives you details on your web site, such as the URL of the site, and other tools that you can use such as monitoring your site requests. You can look into this workspaces as you work but for this article, we will be working with our Files workspace. To get to your Files workspace, click the "Files" tab on the lower left hand of WebMatrix.

We will now be in our files workspace. Notice that we do not have any files that make up our website. Let's create a webpage for our site. Click on the new document icon, create a new html file, give it a name and click ok.

When your file is created, you will have a basic, empty html page. Look familiar? Our html page is already using HTML5 markup!

To move on in this article, you will need some sort of video (either in wbm, mp4, or .ogg format). Place this video in your files workspace. This can be done two ways: right click on the root folder of our site and choosing “add existing file” or by moving our video into the website file.

Adding a Video to our Website

With your .html file open, we will add our simple <video> element. Somewhere in the <body>, add:

<video src="sample.mp4" id="movie" controls height="360" />

Noticed, we defined three attributes in our <video> tag: src, controls and height. The src attribute is where the video file is located. The controls attribute determines if the play/pause, time, volume, etc. controls show up on the page. Since we defined the controls attribute, the controls will be visible. We also defined the height attribute.

In addition to the attributes we have defined, you can add the remaining attributes to the <video> tag.

  • Autoplay: the video will begin to play once page is loaded
  • Loop: continuously loops the video after it is finished
  • Preload: determines if the audio should be loaded when the page is or not. Note: this attribute is ignored if the autoplay attribute is specified.
  • Width: sets the width of the video player

That’s it! We added a video to our webpage.

Run your file. Do you notice something? The video is not visible on the page!

Opening your Video file with Internet Explorer 9

Despite not being able to view your video by running it with WebMatrix, you can instead open the file in the browser.

Open your file in Internet Explorer 9. A pop-up will open at the bottom of the screen. Clicking the “allow blocked content” button will enable the page to run scripts.

Don’t have IE9? Download it at windows.microsoft.com

Your file path will be similar to this: C:\Documents\My Web Sites\HTML5\HTML5-video.html

The video is now visible and able to be played in our browser.

Try to open your file in another browser. Notice something? The video is not visible like when we tried to run the file with WebMatrix. One thing to know about video on the web, no single version of a video is compatible with ALL browsers.

Video Encoding for Browser Compatibility

To make your website with video the most compatible it can be, you need to keep in mind that not only 1 version of your video is cross-compatible. The nice thing about HTML5’s <video> tag is you can nest tags within it. With this, you can link different versions of your video, allowing the browser to play the correct video version for that browser.

To make your website more compatible, you will need to have 3 different versions of your video:

  • One that uses WebM (VP8 + Vorbis).
  • One that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
  • One that uses Theora video and Vorbis audio in an Ogg container.

You may be wondering how you create three different versions of your video. Video encoding (or video conversion) will allow you to create the three different versions of your video. There are a ton of video encoding software available for use – some free and some not.

For this example, I will be using FireFogg - video encoding and uploading for Firefox that is free to install and very simple to use. It does not matter what video encoding software you use, as long as you are able to make a .webm, .ogv, and .mp4 version of your video. Note: you need Firefox 3.5 to use this extension to encode your video file.

Installing and Using FireFogg

Install Firefox 3.5 and go to firefogg.org. If you have not already installed this extension, you will see this:

Click the “Install Firefogg” button. Firefox will then ask if you use to install the software on your computer. Click “allow”

When the Installation window appears, click “Install Now”.

After the installation is complete, you will need to restart Firefox. Click the “Restart Firefox” button.

Once FireFogg has installed, you will be ready to encode your video.

Click on “Make Web Video.”

Choose your preferred language and “Select File”. Choose the video you wish to encode

Once you have selected your video file, option boxes will appear. We will only have to choose 2 options at most: “preset” and “basic quality and resolution control”.

First we will choose the “Preset” box. Click the “Preset” box.

My video is already is in .mp4 format so all I need to do is create .ogv and .webm versions. Let create our .ogv file fire. Choose the “Ogg Web Video Theora, Vorbis (600 kbitsVxs and 400px maximum width” option.

Change the “Basic quality and resolution control” options to your preferred settings.

Click the “Encode to File” button.

Choose where and what to save your file to on your computer. And then wait while FireFogg encodes your file for you!

To make a .webm version of your video, simply choose the Preset option of “Webm Web video VP8” and follow the same steps as above.

Once we have all our video versions, we can now make our website more cross-browser compatible.

Adding Video Compatibility to your Website

Now, let’s get back to our website. Previously we had a simple <video> tag to display our video. Now, we need to change this code to allow the browser to play the video that is compatible with it.

In your .html file, replace

<video src="sample.mp4" id="movie" controls height="360" />

With

<video id="movie" preload controls>
   <source src="sample.mp4" />  
   <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />  
   <source src="sample.ogv" type='video/ogg; codecs="theora, vorbis"' />  
</video>

Open your file in a browser. You webpage is now compatible with IE9, Firefox 3.5 and Chrome, Safari, etc.

Although we now have our 3 versions of our video, but we are still not the most compatible that we could be. Right now we are assuming that the people visiting our site will have HTML5 compatible browsers. But, what if they don’t? To make our site even more compatible and safe, we will have a fall back to a Flash-based video player (like YouTube uses). To do this, directly after your last <source> tag and directly before </video>, add

<object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">     
   <param name="movie" value="flowplayer-3.2.1.swf" />    
   <param name="allowfullscreen" value="true" />     
   <param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/good/bbb_480p.mp4", 
"autoPlay":false, "autoBuffering":true}}' />     
   <p>Download video as 
      <a href="sample.mp4">MP4</a>, 
      <a href="sample.webm">WebM</a>, or 
      <a href="sample.ogv">Ogg</a>.
   </p>  
</object>

Now, everyone can view our site, even users with a non-HTML5 compatible browser!

The movement “Video for Everybody” provides a chunk of HTML code (just like we added) to embed cross-browser compatible videos into a webpage. More information and the code can be found at video for everybody.

A way to customize your <video> controls would be to use JavaScript. Video.js provides a JavaScript library and CSS file that helps developers customize their videos.

Adding Bookmarks to your Video

Adding more functionality to our video requires the use of JavaScript. One thing we could add to spice up our webpage is adding “bookmarks” to our video. These would be links to places in the video the user can jump to by clicking on the link. This requires us to add 2 things to our page: the list of bookmarks that the user can click on, and the JavaScript required to jump to the bookmarked places in our video.

Firstly, let’s add the list of our bookmarks in our video. Somewhere after your </video> and before </body>, add your list:

<section id="bookmarks">
   <h2>Play from first appearance of:</h2>
   <ul>
      <li><a href="#" onClick="PlayFromBookmark('ask-a-ninja');" >Ask A Ninja</a></li>
      <li><a href="#" onClick="PlayFromBookmark('jeffrey-rayport');" >Jeffrey Rayport</a></li>
      <li><a href="#" onClick="PlayFromBookmark('beth-dover');" >Beth Dover</a></li>
   </ul>
</section>

Note: The <section> tag is a new element for HTML5. It is used to represent a section within a document. It can be used in place of a <div> tag.

Here we have defined three bookmarks which we may want to jump to in our video. Depending on your video, you can define more or less bookmarks. For this example, we will have three.

Notice, we have defined an onClick function called “PlayFromBookmark()” that takes a parameter of the bookmark that is clicked. Now, we need to define this PlayFromBookmark() function.

Somewhere between <head> and </head>, we need to add our JavaScript. Add:

<script>
   function PlayFromBookmark(label) {
      var video_player = document.getElementById("movie");
      switch (label) {
         default: video_player.currentTime = 0;
         case "ask-a-ninja": video_player.currentTime = 39;
         case "jeffrey-rayport": video_player.currentTime = 27;
         case "beth-dover": video_player.currentTime = 31;
      } 
      video_player.play();
   }    
</script>

This function changes the video_players current time depending on which link is clicked. It then plays the video from the current time.

Open your file. We can now jump to places in our video by clicking on the links below.

Additional Resources

Download WebMatrix http://www.microsoft.com/web/webmatrix/

Learn how to Download and Install WebMatrix http://www.microsoft.com/web/post/web-development-101-part-1-getting-started-with-webmatrix

Learn more http://www.microsoft.com/web/post/Web-Development-101-using-WebMatrix

Create a website with a WebMatrix site template http://www.microsoft.com/web/post/create-a-website-from-a-webmatrix-site-template

Publish your website http://www.microsoft.com/web/post/how-to-publish-a-web-application-using-webmatrix

Learn to download, edit and republish your website http://www.microsoft.com/web/post/download-edit-and-republish-your-website-with-webmatrix

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!