The Basics: Embedding Videos in HTML

If you are learning programming, one of the most exciting things you can do is to add interactive content to your web page, and what's more interactive than videos? Today, we'll look at how to embed a video in HTML.

The Video Tag: Your Ticket to Interactive Content

HTML5 introduced the <video> tag. This tag allows you to embed videos directly into your web page. It's like turning your web page into a mini-movie theater. The <video> tag is quite straightforward to use. Here's a very basic example:

<video src="myVideo.mp4" controls></video>

In the example above, src is an attribute that tells the browser where the video file is located. This can be a local path on your computer or a URL to a video on the internet. The controls attribute is a boolean attribute that, if present, displays the default video controls. These controls include play/pause, volume control, and a progress bar.

Adding Multiple Sources

Sometimes, your video might be available in more than one format. Different browsers support different video formats, so it's a good idea to provide multiple sources for your video. This is like having different flavors of ice cream available at a party, so there's something for everyone. You can do this using the <source> tag within the <video> tag. Here's an example:

<video controls>
    <source src="myVideo.mp4" type="video/mp4">
    <source src="myVideo.ogg" type="video/ogg">
</video>

In this example, the browser will try to load the first video source (myVideo.mp4). If it can't load or play that format, it will move on to the next source (myVideo.ogg).

Customizing the Video Display

Just having a video play on your webpage is great, but you might want to customize how it looks and behaves. You can do this with a few additional attributes.

• width and height: These attributes allow you to set the dimensions of the video player. It's like choosing the size of the TV screen in your mini-movie theater.

<video src="myVideo.mp4" controls width="500" height="300"></video>

• autoplay: This attribute, when present, makes the video start playing as soon as it's ready. It's similar to when you walk into a movie theater and the movie starts exactly at the scheduled time.

<video src="myVideo.mp4" controls autoplay></video>

• loop: This attribute, if included, will make the video start over again every time it ends. Imagine if your favorite movie could start over as soon as it finished!

<video src="myVideo.mp4" controls loop></video>

• muted: This attribute, when present, mutes the audio of the video. This can be useful for background videos or if you want the user to choose when to hear the audio.

<video src="myVideo.mp4" controls muted></video>

Providing a Fallback

Not all browsers support the <video> tag. To ensure that users on these browsers know what's going on, you can include a fallback message between the opening and closing <video> tags. This message will be displayed only to users whose browsers do not support the <video> tag.

<video src="myVideo.mp4" controls>
    Your browser does not support the video tag.
</video>

In conclusion, HTML makes it relatively easy to embed a video in your web page. It's like having a mini-movie theater right in your web page. So, go ahead and try it out! Happy coding!