Guide to HTML5 Video Element Attributes

HTML5 has made adding videos to web pages much easier with something called the "HTML5 video element." In this blog, we'll look at how it works with simple examples.

What's the HTML5 Video Element?

It's a tool that makes it easy to put videos on web pages. You can do a lot of different things with it, but you need to know about its parts to use it well.

Key Things to Know About HTML5 Video Element

1. src: This is like the video's address. You need it to show the video.

   Example: <video src="video.mp4"></video>

2. controls: Turn this on, and you get buttons for playing, pausing, and changing the volume. It's good for users.

   Example: <video src="video.mp4" controls></video>

3. autoplay: Use this if you want the video to start by itself when someone opens the page.

   Example: <video src="video.mp4" autoplay></video>

4. loop: This makes the video repeat from the start after it finishes. It's nice for background videos.

   Example: <video src="video.mp4" loop></video>

5. muted: It keeps the video's sound off when it begins. Useful when you don't want sound surprises.

   Example: <video src="video.mp4" muted></video>

6. poster: This is like a preview image before the video starts.

   Example: <video src="video.mp4" poster="preview.jpg"></video>

7. preload: It tells the browser how much of the video to load when the page opens. Options are "a lot," "a little," or "none."

   Example: <video src="video.mp4" preload="auto"></video>

8. width and height: These decide how big the video looks on your webpage.

   Example: <video src="video.mp4" width="640" height="360"></video>

9. playsinline: This is for mobiles. It lets the video play on the page, not in full screen.

   Example: <video src="video.mp4" playsinline></video>

10. controlslist: You can choose which controls you want to show, like download or full screen.

    Example: <video src="video.mp4" controls controlslist="nodownload"></video>

11. crossorigin: Use this if your video comes from another place on the web. It helps the browser handle it correctly.

    Example: <video src="https://example.com/video.mp4" crossorigin="anonymous"></video>

12. track: If you need subtitles or captions, you use this with another tool to add them to your video.

    Example:

    <video src="video.mp4">
      <track label="English" kind="subtitles" srclang="en" src="subtitles-en.vtt">
    </video>
    

Wrapping Up

The HTML5 video element is great for putting videos on your web page. The parts we talked about help you make videos that are easy to use and look good. You can use them to make video galleries, add videos to your website's background, or create interactive stuff.