Search⌘ K
AI Features
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Hands On: Supporting Multiple Video Formats

Explore how to support multiple video formats using the HTML5 video tag to create a seamless viewing experience across browsers like Chrome and Internet Explorer. Learn practical steps to add video sources and fallback text to handle compatibility issues, improving user experience on your web pages.

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 ...