HTML LEARNING PATH
2.10 Use Media in HTML
WHY
The video and audio element in HTML specify a standard way to embed media into a web page. A media file typically contains multiple tracks — a video track or audio tracks that can have metadata, such as the aspect ratio of a video track or the language of an audio track, or a variety of container formats. A browser will choose the first video file it can actually play based on the container information. It is up to you to know which browsers support which media files.
HOW
Use the HTML <video> or audio element to embed video content in a web page. The video element contains one or more media sources. To specify a video source, use either the src attribute or the <source> element; the browser will choose the first compatible reference. The controls attribute adds video controls, like play, pause, and volume. Include width and height attributes for video to set the size for the browser.
CODE\/IMAGE:
<video width="" height="" controls>
<source src="movie.mp4" type="video/mp4">
Your movie here.
</video>
GLOSSARY
Video tag <video> is the element for embedding video in a web page.
Audio tag <audio> is the element for embedding audio in a web page.
Embedding media into a web page means the media file plays within the web page without the user having to leave the screen.
TIPS AND RESOURCES
PRACTICE
Copy a video to your MyWebsite folder on your computer. Edit your web page and add an video tag to a new paragraph container. Make sure that you specify the exact size and video type for your movie.
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<meta name="description" content="Describe the content of your web page here">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Your Name">
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>A list item</li>
<li>A second list item</li>
<li>A third list item</li>
</ul>
<div class="parent">
<div class="child"></div>
</div>
<section>
<h1>This is the heading</h1>
<p><img src="url" alt="some_text"></p>
<p><em>This is the paragraph content. <a href="http://www.google.com">Search Google.com</a></em></p>
</section>
<section>
<div class="parent">
<div class="child"></div>
</div>
</section>
<section>
<p>
<video width="" height="" controls>
<source src="movie.mp4" type="video/mp4">
Your movie here.
</video>
</p>
</section>
</body>
</html>
Save your file.