Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Hands On: Using the Video Tag

Hands On: Using the Video Tag

In this lesson, we will cover the three different video formats that are commonly used. Let's begin!

We'll cover the following...
widget

EXERCISE: Using the <video> tag

To save time, you will start with a prepared project that can be found in the below folder in the live widget 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>
  <!-- Place the video here -->
  <video src="./Video/Caribbean.mp4" controls autoplay>
  </video>

</body>
</html>

To learn adding video to an HTML5 web page, follow these steps:

Step 1: #

Open the index.html file. You will find a placeholder comment there to insert a video.

Type the following markup right beneath the comment on line 22 in the live ...

Ask