View video tutorial

HTML Video

HTML

Any video file can be shown in html page using <video> tag.

HTML Video


<video> tag uses <source> tag for video files of alternate formats.

The first recognized file will be played.

The controls attribute adds media control buttons on the screen. such as play, pause, volume etc.

If no files recognized by the browsers the text inside <video> tags will be displayed.

Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML video tag example</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML video tag example</h2>
    <section>
        <video id="myVideo1" src="path-of-resource" controls></video>
    </section>
</body>
</html>

Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML video tag example</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML video tag example</h2>
    <section>
        <video id="myVideo2" controls="controls">
            <source src="video-path" type="video_type">
        </video>
    </section>
</body>
</html>

➔ For subtitle use track.

Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML track tag example</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML track tag example</h2>
    <section>
        <video id="myVideo2" controls="controls">
            <source src="video-path" type="video_type">
            <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        </video>
    </section>
</body>
</html>