Lesson 18: Video

Overview

In this HTML lesson, we explain how to use the video element to allow for video playback. The video element is similar to the image and audio elements in that it contains a source attribute, which can designate any location on the internet. There are some simple attributes of the video element, which can be added to enable various features: controls, autoplay, loop, and muted. We also have the width and height attributes to control the size of the video. Lastly, we have the preload attribute, which can be used to preload the video or just the metadata.

A Basic Example

Our first document contains a simple video element with two common attributes in it. The src attribute works exactly like the src attribute in the img element and can use resources from anywhere on the internet. Additionally, the controls attribute tells the browser to include controls for manipulating the playback. The controls attribute has no associated value, we just include it to tell the browser to include the controls on the page. The controls available are a play button that can be used to pause the video once it is playing, a seek control for setting the point in the range where the video plays from, a volume control with a mute button, a full-screen control to make the video take up the entire screen, and an additional control for other options. This last control has only one option, which is to set the video to picture in a picture by default.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <video src="3DAtmosphere.mp4" controls></video>
  </body>
</html>

Output

Additional Attributes

In this example, we present more attributes of the video element: autoplay, loop, and muted. Like the controls attribute, these atttributes have no associated value, they are just included to activate them. The autoplay attribute is include to tell the browser to start playing the video clip immediately when the page loads, instead of waiting for the user to start the video. The loop attribute is included to tell the browser to keep playing the video repeatedly over and over. Finally, the muted attribute is included to tell browser to set the mute on the volume control.

Example1a.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <video src="3DAtmosphere.mp4" controls autoplay loop muted></video>
  </body>
</html>

Size Attributes

In addition to the attributes that the audio element has, the video element has attributes to control the width and height of the video player. The video always maintains its aspect ratio, and it is maximized to fit within the specified dimensions. All of the extra space is left blank.

Example1b.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <video src="3DAtmosphere.mp4" controls width="600" height="200"></video>
  </body>
</html>

The Source Element

Instead of the src attribute, we can use a source element to designate video files by including it inside of the video element, as we show here.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <video controls>
      <source src="3DAtmosphere.mp4" type="video/mp4">
    </video>
  </body>
</html>

Multiple Sources

In order to mitigate the lack of support by some browsers for some file types, we can include multiple alternative source files. Then, if a browser does not support the first source file type, it moves on to the next source until it finds one that it does support.

Example2a.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <video controls>
      <source src="3DAtmosphere.mp4" type="video/mp4">
      <source src="3DAtmosphere.ogg" type="video/ogg">
    </video>
  </body>
</html>

The Preload Attribute and Tracks

In this last example, we have the final video attribute: preload. The preload attribute can be assigned three possible values: auto, metadata, and none. The value auto tells the browser to preload the video file, the value metadata tells the browser to preload the metadata, and the value none tells the browser not to preload anything. In addition, we can insert track elements to provide metadata, subtitles, etc.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <video controls preload="auto">
      <source src="3DAtmosphere.mp4" type="video/mp4">
      <track src="3DAtmosphere.vtt" kind="subtitles" srclang="en" label="English" >
      <track src="3DAtmosphereMeta.vtt" kind="metadata" label="English" >
    </video>
  </body>
</html>