How It Works: Using the Video Tag
Explore how to use the HTML5 video tag to embed video content in your web pages. Learn to add controls, autoplay videos, and customize player size. Practice with attributes like poster, mute, and loop to create enriched user experiences with multimedia.
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 <video> 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 ...