Adding an HTML5 video control to your webpage

發行項
03/03/2016

Windows Internet Explorer 9 introduced support for HTML5 video.Using HTML5 video, you can embed a full featured video player on your webpage, without requiring a third-party plug-in or even JavaScript.

How do I get started?
What attributes can I use with a video element?
How do I support more than one format?
What happens on older browsers?
Can I add a little style?
Where to now?
API Reference
Samples and tutorials
Internet Explorer Test Drive demos
IEBlog posts
Specification
Related topics

How do I get started?

In its most basic form, adding a video player to your webpage with the HTML5 video element is done with a single line of HTML. Add the controls attribute, and users can control the video playback. Other attributes enable you to set the source file, add a placeholder image, or start playing the video automatically. Like most HTML elements, you can use Cascading Style Sheets (CSS) to style and position the element.

The syntax for the HTML5 element is:

<video src="demo.mp4" controls autoplay >HTML5 Video is required for this example</video>

For a single line of code, this example enables you to accomplish several things. The src attribute points to the video file to play. The src attribute provides one of two ways to specify content for the video element. To play your video, assign the src attribute to the URL of a video file.

The controls attribute tells the browser to display the built-in playback controls. The built-in controls can differ in function and look between browsers. At a minimum, you should see Play and Pause controls, a progress bar or buttons that skip forward or backward in the video, and a time counter. While a video is playing, the controls are usually hidden and then reappear when the user hovers their mouse over the player.

Finally, the autoplay is a Boolean attribute that causes the video to play as soon as it loads.

What attributes can I use with a video element?

The video element supports a number of attributes to control video playback and display. This table highlights the basic video attributes. The Boolean attributes are considered "true" by their presence and "false" by their absence as attributes of the video element.

Attribute	Description
src	A string that represents a URL that points to a video file.
controls	Boolean attribute that turns on a set of built-in playback controls. This typically includes play, pause, seek, and set volume. Internet Explorer 10 also displays a control for choosing multiple audio and text tracks.
poster	A string that represents a placeholder image that is displayed in the video player. The poster image is displayed only when a video isn't available, either because the source isn't set at that point, or the content is still loading.
loop	Boolean attribute that replays the video repeatedly until the pause button on the controls is pressed, or the pause method is called from script.
muted	Boolean attribute that plays video with the audio track turned off.
autoplay	Boolean attribute that starts playing the video automatically after the player has enough content buffered.
preload	Boolean attribute that defines a hint to how much buffering is needed.
height	Sets the height of the video player in pixels.
width	Sets the width of the video player in pixels.

Note If you set only one dimension of the video player, height for example, the video player sizes the video to that dimension and scales the other dimension based on the aspect ratio of the video content. If you set both dimensions to an aspect ratio that doesn't match the video content, the player scales the closest dimension to fit, but it maintains its aspect ratio. The video will be centered either horizontally or vertically with blank space on either side.

This next example plays a video, displays a poster until content is loaded, repeatedly plays a video with playback controls.

<video src="demo.mp4" controls autoplay loop muted preload="auto" poster="demo.jpg" >
HTML5 Video is required for this example
</video>

The preceding attributes can be set on the video elements in HTML, but there are a many more options available when you use JavaScript. For more info, see Using JavaScript to control the HTML5 video player.

How do I support more than one format?

The video element only allows you to set one src attribute at a time. This works fine if you know you're going to be using just a single file format. However, to support more than one file format, and more browsers, you can use the source element.

The source element works with the video element to provide a "best fit" for video content format. What that means is that you can assign several formats, and the HTML5 video player picks the one that is the most compatible. This is typically an .mp4 file for Windows Internet Explorer , or an .ogg/.ogv format for some other browsers. This example shows a video element that has three possible file formats:

 <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>             
   <p>Fallback code if video isn't supported</p>/
 </video>

In this example, there are three formats listed — mp4, webm, and ogg video. Depending on the browser, the video element picks the one that it can play. If it can't play any of the formats, or if HTML5 video isn't supported, it falls through and displays the text contained between the video tags. This "fallback" behavior can be used to display a message, or can include an embedded player.

What happens on older browsers?

Adding a video to a webpage without plug-ins or external players is good for users running Internet Explorer 9 or Internet Explorer 10 in the new Windows UI or for users on mobile devices that don’t support plug-ins. However, it might limit your audience to just users with modern browser support. The video and audio HTML5 elements enable you to put text or code between the tags that is only executed if HTML5 isn't supported in a user's browser.

Note The audio and video elements are different from canvas in that the code between the elements is executed only when the two elements are not supported. Canvas is unique in that code between the tags, while not displayed, actually executes even when canvas is supported. The Canvas Shadow DOM enables developers to provide accessibility support for screen readers and other devices. For more info, see HTML5 Canvas and the Canvas Shadow DOM.

This next example is similar to the last example, except an object tag has been added to run the Adobe Flash player to support earlier browsers.

 <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>     
   <object>
     <embed src="demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" />
   </object>        
   HTML5 Video is required for this example
 </video>

In this example, if the browser supports HTML5 video, it tries the video formats presented. If HTML5 video isn't supported, it loads the Flash player using the object and embed tags.

Another option for fallback is simply to offer a link to the video content as shown in this example:

HTML5 Video is required for this example. 
<a href="demo.mp4">Download the video</a> file.

For more info about fallback techniques in Windows Store app using JavaScript, see Plugins and ActiveX controls.

Can I add a little style?

Your HTML5 video player can be styled using CSS to help integrate it into your webpage design. You can set the height and width; specify backgrounds, borders, and position; and control visibility of video elements using CSS.

Using the z-index property of CSS, you can overlay images, text, or even other videos over a video element. One example of this is Picture in Picture (PiP), which overlays a small video over a larger one on the same screen.

Picture in Picture is a technique often used to show related content such as diagrams on a sports event, or an interpreter using sign language. The following example uses CSS to position a small video over a larger one. It also uses CSS to set the width of the video player, and puts a colored border around the inserted images.

    <style type="text/css">       
    #Video1
    {
     position:absolute;
     top: 50px;
     left:0px;        
     width:1000px;       
     border:2px solid blue;
     display:block;
     z-index:99;
     }
        
   #Video2
    {
     position:absolute;
     top:80px;
     left:60px;
     width:300px;
     border:2px solid red;        
     z-index:100;
    }
    
    </style>
</head>
    <body>        
       <video id="Video1" controls loop autoplay >
           <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" />           
       </video>
       
       <video id="Video2" muted autoplay controls >
           <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/video.mp4" type="video/mp4" />
           HTML5 Video not supported
       </video>

The z-index property lets you change the order of display. Normally elements on a webpage are displayed in the order in which they are created. If an element overlaps another element, the last one rendered will be fully visible. The second video frame's z-index is set to 100 to be sure it is the top-most element (assuming there aren't more than 100 elements created ahead of the video). The second video frame is positioned based on the size of the videos that are playing and the number of elements on the page.

There are other CSS properties that can be used, such as transform to rotate an image, or borderRadius to create rounded corners on the video element as shown in the following example. For more info, see the Cascading Style Sheets reference pages.

<html>
  <head>
    <title>Rotating a video</title>
    <style type="text/css">
   /* Set basic style for video */     
    #theVideo  
   {
        display:block;
        position:absolute;
        left:200px;
        top:200px;
        border: 2px solid red;
        border-radius: 20px;  
    }   
    /* Light up the image as a button, change cursor */
    #rotateVideo:hover
    {
        border:2px solid green;
        cursor: pointer;                
     }
        
    </style>
    <script>
        //  When the HTML elements load, call init()
        document.addEventListener("DOMContentLoaded", init, false);
       
        //  Rotate the video by 30degrees when image is clicked
        function init() {
          var video = document.getElementById("theVideo");
          if (video) {
            var rotateVal = 0;       //  Global variable to hold current rotation value
            document.getElementById("rotateVideo").addEventListener("click", function () {
              rotateVal = (rotateVal += 30) % 360;  // Calculate the next value, but keep between 0 and 360
              var temp = "rotate(" + rotateVal + "deg)"; // Create a style string
              document.getElementById("theVideo").style.msTransform = temp;  // Set the style
            }, false);
          }
        }
    </script>
   
  </head>
  <body>
    <img src="rotate.png" id="rotateVideo" alt="Rotate button" title="Click to rotate 30 degrees" role="button"/>
    <video src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" id="theVideo" controls >
      This browser or mode doesn't support HTML5 video.
    </video>
  </body>
</html>

Where to now?

Here we've showed you how to use a single line of HTML to add a full featured video player control to your webpage. You've seen how to support multiple video formats for cross-browser support and a simple fallback example to support browsers that don't support HTML5 video.

In Using JavaScript to control the HTML5 video player, you'll see how to use JavaScript to add external controls for playback, check compatibility with file formats, and how to control the volume and speed of playback.