Curriculum

HTML Basic

HTML Introduction

0/1

HTML Editors

0/1

HTML Basic

0/1

HTML Elements

0/1

HTML Attributes

0/1

HTML Headings

0/1

HTML Paragraphs

0/1

HTML Styles

0/1

HTML Formatting

0/1

HTML Quotation

0/1

HTML Comments

0/1

HTML Colors

0/1

HTML CSS

0/1

HTML Links

0/3

HTML Images

0/3

HTML Favicon

0/1

HTML Page Title

0/1

HTML Tables

0/8

HTML Lists

0/4

HTML Block and Inline

0/1

HTML Div

0/1

HTML classes

0/1

HTML id

0/1

HTML Iframes

0/1

HTML Java Script

0/1

HTML File Paths

0/1

HTML - The Head Element

0/1

HTML Layout

0/1

HTML Responsive

0/1

HTML Computer Code

0/1

HTML Semantic

0/1

HTML Style Guide

0/1

HTML Entities

0/1

HTML Symbols

0/1

HTML Emojis

0/1

HTML Charsets

0/1

HTML URL Encode

0/1

HTML vs. XHTML

0/1

HTML Forms

0/6

HTML Graphics

0/2

HTML Media

0/5

HTML APIs

0/5

Text lesson

HTML Video

The HTML <video> Element

To display a video using HTML, employ the <video> element:

Example

<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

How it Works

The controls attribute provides video controls such as play, pause, and volume.

Including width and height attributes is recommended to prevent page flickering during video loading if these dimensions are not set.

The <source> element allows specification of alternative video files that browsers can choose from, with the first recognized format being used.

Text between the <video> and </video> tags appears only in browsers that do not support the <video> element.

HTML <video> Autoplay

To initiate automatic playback of a video, utilize the autoplay attribute:

Example

<video width=”320″ height=”240″ autoplay>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

Note that in Chromium browsers, autoplay is generally restricted. However, muted autoplay is consistently permitted.

In Chromium browsers, autoplay is typically restricted, but muted autoplay is always allowed.

Example

<video width=”320″ height=”240″ autoplay muted>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

Browser Support

The numbers in the table indicate the earliest browser version that fully supports the <video> element.

da3fa333-bb23-4831-ba7e-a34a4864d628

HTML Video Formats

The three supported video formats are MP4, WebM, and Ogg. Browser support varies for each of these formats.

Browser	MP4	WebM	Ogg
Edge	YES	YES	YES
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

HTML Video – Media Types

File Format	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML Video – Methods, Properties, and Events

The HTML DOM provides methods, properties, and events specifically for the <video> element.

These enable tasks such as loading, playing, and pausing videos, as well as adjusting settings like duration and volume.

Additionally, DOM events are available to inform you when a video starts playing, pauses, and more.

HTML Video Tags

Tag	Description
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements, such as <video> and <audio>
<track>	Defines text tracks in media players