HTML Video

HTML provides the <video> element to embed video content directly into a webpage.

---

1. Introduction to HTML Video

The <video> element is used to display video files such as tutorials, demonstrations, advertisements, presentations, and other multimedia content.

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

2. Basic Video Syntax

A simple video element can be written as:

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

The controls attribute displays built-in controls such as play, pause, volume, and fullscreen.

3. The controls Attribute

The controls attribute provides the user with video playback controls.

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

4. The src Attribute

The src attribute specifies the video file location.

<video controls src="videos/html-course.mp4">
    Your browser does not support the video element.
</video>

A video can also be stored inside a dedicated folder:

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

5. The source Element

The <source> element allows multiple video sources to be provided.

<video controls>

    <source src="video/lesson.mp4" type="video/mp4">
    <source src="video/lesson.webm" type="video/webm">

    Your browser does not support the video element.

</video>

The browser can select a supported source from the available options.

6. Common Video Formats

Format	MIME Type	Common Use
MP4	video/mp4	General web video
WebM	video/webm	Modern web video
Ogg	video/ogg	Open multimedia content

7. width and height Attributes

The width and height attributes can be used to specify the dimensions of the video.

<video controls width="600" height="350">
    <source src="video/course.mp4" type="video/mp4">
</video>

8. poster Attribute

The poster attribute specifies an image that is displayed before the video starts playing.

<video controls
       poster="images/video-thumbnail.jpg"
       width="600">

    <source src="video/course.mp4" type="video/mp4">

</video>

9. autoplay Attribute

The autoplay attribute requests that the browser start the video automatically when possible.

<video controls autoplay>
    <source src="video/intro.mp4" type="video/mp4">
</video>

10. muted Attribute

The muted attribute starts the video without audio.

<video controls muted>
    <source src="video/background.mp4" type="video/mp4">
</video>

Muted video is commonly used for videos that should begin without sound.

11. loop Attribute

The loop attribute causes the video to restart automatically after it finishes.

<video controls loop>
    <source src="video/demo.mp4" type="video/mp4">
</video>

12. preload Attribute

The preload attribute provides a hint to the browser about how much video data should be loaded before playback.

Value	Description
none	The browser should not preload the video.
metadata	Only metadata may be loaded.
auto	The browser may load the video automatically.

Example

<video controls preload="metadata">
    <source src="video/tutorial.mp4" type="video/mp4">
</video>

13. Combining Video Attributes

Multiple attributes can be used together.

<video
    controls
    width="640"
    height="360"
    poster="images/thumbnail.jpg"
    preload="metadata">

    <source src="video/tutorial.mp4" type="video/mp4">
    <source src="video/tutorial.webm" type="video/webm">

    Your browser does not support the video element.

</video>

14. Video File Folder Structure

Video files can be organized inside a dedicated folder.

MyWebsite/
│
├── index.html
│
├── video/
│   ├── lesson1.mp4
│   ├── lesson2.mp4
│   └── introduction.webm
│
├── images/
│   └── thumbnail.jpg
│
└── css/
    └── style.css

15. Video Fallback Text

Text inside the <video> element can provide fallback information.

<video controls>

    <source src="video/course.mp4" type="video/mp4">

    Your browser does not support HTML video.
    Please use a modern browser to watch this video.

</video>

16. Responsive Video

CSS can be used to make a video responsive so that it fits different screen sizes.

<video controls
       style="max-width:100%; height:auto;">

    <source src="video/course.mp4" type="video/mp4">

</video>

17. Video with CSS Class

A CSS class can be used to style multiple video elements consistently.

<style>
    .course-video {
        width: 100%;
        max-width: 700px;
        height: auto;
        border-radius: 8px;
    }
</style>

<video class="course-video" controls>
    <source src="video/course.mp4" type="video/mp4">
</video>

18. Video with Poster and Controls

<video
    controls
    poster="images/html-course-thumbnail.jpg"
    width="700">

    <source src="video/html-course.mp4" type="video/mp4">

    Your browser does not support HTML video.

</video>

19. Video Accessibility

Video content should be designed so that users can understand and control the content effectively.

• Provide visible playback controls.
• Provide captions when appropriate for spoken content.
• Provide a transcript when useful.
• Use a descriptive poster image where appropriate.
• Avoid unexpected audio playback.

20. Captions Using track

The <track> element can be used to provide timed text such as captions for video.

<video controls width="700">

    <source src="video/lesson.mp4" type="video/mp4">

    <track
        src="captions/lesson-en.vtt"
        kind="subtitles"
        srclang="en"
        label="English"
        default>

    Your browser does not support HTML video.

</video>

21. Video Transcript

A transcript can also be provided separately from the video.

<video controls>
    <source src="video/html-lesson.mp4" type="video/mp4">
</video>

<h2>Transcript</h2>

<p>
    Welcome to our HTML video lesson.
    Today we are learning how to embed videos
    using the HTML video element.
</p>

22. Video Attributes Summary

Attribute	Purpose	Example
controls	Displays video controls.	controls
autoplay	Requests automatic playback.	autoplay
muted	Starts video without sound.	muted
loop	Repeats the video.	loop
width	Specifies video width.	width="640"
height	Specifies video height.	height="360"
poster	Displays an image before playback.	poster="thumbnail.jpg"
preload	Provides a loading hint.	preload="metadata"

23. Common Mistakes

• Using an incorrect video path.
• Forgetting the controls attribute.
• Using only one video format when additional sources are useful.
• Using autoplay without considering the user experience.
• Ignoring video responsiveness.
• Forgetting captions or transcripts for important spoken content.
• Using unnecessarily large video files.

24. Practice Task

25. Complete Practice Example

<!DOCTYPE html>
<html>

<head>
    <title>HTML Video Lesson</title>

    <style>
        .course-video {
            width: 100%;
            max-width: 700px;
            height: auto;
            border-radius: 8px;
        }
    </style>
</head>

<body>

    <h1>HTML Video Lesson</h1>

    <p>
        Watch the following HTML programming lesson:
    </p>

    <video
        class="course-video"
        controls
        poster="images/html-thumbnail.jpg"
        preload="metadata">

        <source src="video/html-lesson.mp4"
                type="video/mp4">

        <source src="video/html-lesson.webm"
                type="video/webm">

        <track
            src="captions/html-en.vtt"
            kind="subtitles"
            srclang="en"
            label="English"
            default>

        Your browser does not support HTML video.

    </video>

    <h2>Transcript</h2>

    <p>
        Welcome to our HTML programming lesson.
        Today we are learning about HTML video.
    </p>

</body>

</html>