Scribd
Upload
2 views

HTML - Video Element

The HTML <video> element allows for video playback on web pages, supporting formats like MP4, WebM, and Ogg. It can include multiple <source> tags for different formats, and attributes like controls, autoplay, and loop enhance user interaction. The document also discusses setting dimensions, using thumbnails, and browser support for various video formats.

Uploaded by

Abdul Basir
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML - Video Element

The HTML <video> element allows for video playback on web pages, supporting formats like MP4, WebM, and Ogg. It can include multiple <source> tags for different formats, and attributes like controls, autoplay, and loop enhance user interaction. The document also discusses setting dimensions, using thumbnails, and browser support for various video formats.

Uploaded by

Abdul Basir
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML - Video Element

Anzeige
Best Liposuctions Surgeons in Turkey (See List)
Explore popular tummy tuck treatments and their
benefits.
Tummy Tuck LEARN MORE

HTML<video> element is used to enable video playback support within a web page.

It works very similarly to the <img> element as it also requires adding the path or URL of the video within
the src attribute. The HTML supports only MP4, WebM, and Ogg video formats. The <video> element also
supports audio however, the <audio> element is more suitable for that purpose. We will cover the audio
element in the next chapter.

Anzeige
Best Liposuctions Surgeons in Turkey (See List)
Explore popular tummy tuck treatments and their
benefits.
Tummy Tuck LEARN MORE

Syntax
Motion
<video width="450" height="250" controls>
a Distributor
<source src="url/of/video" type="video/webm">
</video> Open
Examples of HTML video Element
Following are some example codes that illustrate the use of video element in a webpage.

Embed a Video in HTML

To embed a video inside a web page, we need to set the src attribute inside the <video> element that
specifies the path or URL for video. A web page serves content to a wide variety of users with various types
of browsers. Each browser supports different video formats (MP4, WebM, and Ogg) as mentioned earlier.
Therefore, we can supply all the formats that HTML supports by including multiple <source> tag within
<video> element. We let the browser decide which format is more suitable for video playback.

We can also enable the built-in controls for controlling audio and video playback to the users (if needed)
with the help of controls attribute. It provides an interface that enables users to manage video playback
functions such as volume adjustment, video navigation (forward and backwards) and play or pause
operations.

The following example shows how to insert the path or URL of video inside the video element.

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML Video Element</title>
</head>

<body>
<p>Playing video using video element</p>
<p>
The browser is responsible for determining
the appropriate format to use.
</p>
<video width="450" height="250" controls>
<source src="/html/media/video/sampleTP.webm"
type="video/webm">
<source src="/html/media/video/sampleTP.mp4"
AI in Motion
type="video/mp4">
<source src="/html/media/video/sampleTP.ogv"
Become a Distributor
type="video/ogg">
Open
<p>Sorry, video element is not supported!</p>
</video>
</body>
</html>

Playing video using video element

The browser is responsible for determining the appropriate format to use.

0:00

Setting the Dimension of Video Display Area

To set the dimension of video display area, also known as the viewport, we can use the height and width
attributes of the <video> element. These attributes define the height and width of the video viewport in
pixels.

Note that the video will adjust its aspect ratio (e.g. 4:3 and 16:9) to align with the specified height and
width. Therefore, it is advisable to match the dimensions of viewport for a better user experience.

Let’s look at an example code below to understand better.

Open Compiler

<!DOCTYPE html>
<html> AI in Motion
<head> Become a Distributor
<title> Open
HTML Video Element
</title>
</head>
<body>
<p>Playing video using video element</p>
<video width="450" height="250" controls>
<source src="/html/media/video/sampleTP.mp4"
type="video/mp4">
</video>
</body>
</html>

Playing video using video element

0:00

Autoplay and Looping of Video

We can configure the video to play automatically in a loop by using the autoplay and loop attributes.
Remember, a few browsers like Chrome 70.0 do not support autoplay feature unless the muted attribute is
used. Therefore, it is recommended to use autoplay and muted attributes together.

The following example illustrates the autoplay and looping of video


AI in Motion
Become a Distributor
Open Compiler
Open
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Element</title>
</head>
<body>
<p>Playing video using video element</p>
<video width="450"
height="250"
autoplay
muted
loop>
<source src="/html/media/video/sampleTP.mp4"
type="video/mp4">
</video>
</body>
</html>

Playing video using video element

AI in Motion
Using a Thumbnail for theBecome
Videoa Distributor
Open
We can pass a URL of an image that works as a thumbnail for the video within the poster attribute of
<video> element. It will display the specified image until the video starts playing.

In the following example, we are illustrating the use of poster attribute

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML Video Element</title>
</head>
<body>
<p>Playing video using video element</p>
<video width="450"
height="250"
controls
muted
poster ="html/images/logo.png" >
<source src="/html/media/video/sampleTP.mp4"
type="video/mp4">
</video>
</body>
</html>

AI in Motion
Become a Distributor
Open
Playing video using video element

0:00

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified
expert to boost your career.

Anzeige
Best Liposuctions Surgeons in Turkey (See List)
Explore popular tummy tuck treatments and their
benefits.
Tummy Tuck LEARN MORE

Browser Support for different Video Formats


AI in Motion
The table below illustrates the various videoa formats
Become that are supported by different browsers
Distributor
Open
Browser OGG WebM MP4

Chrome Yes Yes Yes

Edge Yes Yes Yes

Safari No Yes Yes

Firefox Yes Yes Yes

Opera Yes Yes Yes

AI in Motion
Become a Distributor
Open

You might also like