Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Hands On: Supporting Multiple Video Formats

Hands On: Supporting Multiple Video Formats

In this lesson we will learn how to add support for multiple video formats in HTML. Let's begin!

We'll cover the following...

Exercise: Supporting multiple video formats

To save time, you will start with the same prepared project as in the previous exercise (EXERCISE: Using the <video> tag) as given below:

<!DOCTYPE html>
<html>
<head>
  <title>Using the &lt;video&gt; tag</title>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      margin-left: 24px;
    }
    p { 
      width: 640px;
    }
  </style>  
</head>
<body>
  <h1>Snorkeling in the Caribbean</h1>
  <p>
  Hey dude, In 2010 I cruised around a few great
    Caribbean islands. Here is a short video about
    my snorkeling experience.
  </p>
  <video src="/Video/Caribbean.mp4" controls autoplay>
  </video>
</body>
</html>

To learn new features of the <video> tag, follow these steps:

Step 1:

Open the index.html file. Add the ...