HTML: Video

Hello, young web designer! In this tutorial, we're going to learn about adding videos to your HTML web pages. Videos can make your site more engaging and entertaining. Let's get started!

1. The <video> Element To add a video to your web page, you'll use the <video> element. The <video> element allows you to include video files in various formats, like MP4, WebM, and OGG. Here's a basic example of a <video> element:

htmlCopy code
<video src="example.mp4"></video>

In this example, the src attribute specifies the URL of the video file.

2. Adding Video Controls By default, the <video> element does not show any controls for playing, pausing, or adjusting the volume of the video. To add these controls, you can use the controls attribute:

htmlCopy code
<video src="example.mp4" controls></video>

Now, the browser will display a default set of video controls.

3. Supporting Multiple Video Formats Not all browsers support the same video formats. To ensure that your video works in as many browsers as possible, you can provide multiple video sources using the <source> element:

htmlCopy code
<video controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
  Your browser does not support the video element.
</video>

In this example, we provide both an MP4 and a WebM version of the video file. The browser will choose the first supported format.

4. Practice Time Now let's practice adding a video to your web page! Follow these steps:

Step 1: Open the HTML file you created in the previous tutorial or create a new one.

Step 2: Choose a video file that you'd like to add to your web page. Make sure you have permission to use the file and that it's in a supported format (like MP4, WebM, or OGG).

Step 3: Add a <video> element to your HTML file, including the src attribute for the video file and the controls attribute to display the video controls.

Step 4: (Optional) If you have multiple formats of the video file, use the <source> element to provide multiple sources for better browser support.

Step 5: Save your file and open it in a web browser to see the video player on your web page. Test the video controls to make sure everything works!

Adding videos to your HTML web pages can be a fun and engaging way to enhance your site. Keep practicing, and soon you'll be able to incorporate videos into your web designs like a pro!