HTML <abbr> Tag Tutorial - Usage, Syntax, Attributes and Example

Introduction
Attributes

INTRODUCTION

The HTML <video> element allows you to play videos directly into web pages. It does this by embedding a media player which supports video playback into the document.

The content inside the opening and closing <video></video> tags is shown as a fallback in browsers that don't support the element.

Example:


<video controls width="250">
 <source src="/shared-assets/videos/coding.webm" type="video/webm" />
 Download the video
 <a href="/shared-assets/videos/coding.webm">coding.webm</a>
</video>

Output:

Attributes

1. autoplay

autoplay is an boolean attribute. This attribute causes the video to start playing automatically as soon as it is ready, without waiting for the entire file to download. Websites that autoplay video (or videos with sound) can be disruptive for users and and most browsers block video/audio from autoplay.

2. controls

controls is an boolean attribute. When this attribute is included, the browser provides controls that let the user manage video playback such as adjusting the volume, seeking, pausing or resuming playback, video speed, picture-in-picture and others .

3. controlslist

The controlsList attribute is used to customize which controls appear in the default media player. It allows developers to hide specific controls, such as download, volume, and fullscreen options. This attribute is always used with the controls attribute.

The possbile values of this attribute is listed below.

nodownload - When this value is used it hides the download button.
nofullscreen - When this value is used it hides the fullscreen button.
noremoteplayback - When this value is used it disables remote playback features like casting to external devices.

4. crossorigin

The crossorigin attribute provides support for CORS. Cross-Origin Resource Sharing(CORS) is an mechanism that allows server to specify any origins(meaning external server/website) other that itself from which browser is permitted to access resources. For security reasons Browsers restrict cross-origin requests.

This attributes defines whether user credentials should be sent during CORS request. User Credentials are generally cookies, TLS client certificates or HTTP authentication header containing username and password. By default these credentials are not sent in Cross-Origin request which makes a site vulnerable to Cross-site Request Forgery. The possible values of this attribute are listed below.

anonymous: Cross-Origin request is performed without user-credentials.
use-credentials: Cross-Origin request is performed using user-credentials.
If this attribute is not present the resource is fetched without CORS request.
If the value of this attribute is invalid, then it resolves to anonymous.

5. src

The src attribute is used to specify URL of the video to embed. This attribute is optional, as the <source> element within the <video> block can also be used to specify the video file.

When the src attribute is used, then <video> element can contain zero or more <track> element but not <source> element.

When the src is not used, then <video> element can contain zero or more <track> element and zero or more <source> element.

6. loop

The loop is a Boolean attribute that, when present, causes the video player to automatically restart from the beginning once it reaches the end.

7. muted

The muted is Boolean attribute which determines whether the video is muted initially. By default, it is set to false.

8. preload

The preload attribute specifies how the browser should handle loading the video file before playback begins. It helps optimize performance and user experience based on network conditions and expected usage. It is an enumerated attribute. The possbile values are listed below.

none - When this value is used the video file is not preload; it loads only when the user initiates playback.
metadata - When this value is used the browser loads only basic metadata (e.g., duration, file size) but not the full video file.
auto - When this value is used the browser loads the entire video file as soon as the page loads.
empty string - When the value is empty then it resolves to auto value.

9. disablepictureinpicture

Picture-in-Picture (PiP) is a feature that allows a video to play in a small, resizable floating window while the user continues interacting with other content on the screen. This enables multitasking, as the user can watch a video while browsing a website, using other apps, or working on a document.

The disablepictureinpicture attribute prevents the browser from displaying a Picture-in-Picture menu suggestion. When this attribute is added, users cannot activate PiP through the context menu or built-in browser controls.

10. disableremoteplayback

The disableRemotePlayback attribute in HTML prevents the <video> element from being streamed to external devices like Chromecast or AirPlay. When applied, users are unable to cast or mirror the video to another screen.

11. playsinline

The playsinline attribute in HTML allows a <video> element to play directly within the webpage on mobile devices, instead of switching to fullscreen mode automatically (which is the default behavior on some devices, like iPhones). It is useful for interactive videos or when fullscreen mode disrupts the user experience.

12. poster

The poster attribute in HTML is used to specify an image that will be displayed before the video starts playing or while it is loading. This provides a preview or thumbnail for the video content.

If this attribute is not set, the display remains empty until the first frame of the video is available, at which point it is shown as the poster frame.

13. height

The height attribute in HTML specifies the display height of the video player in CSS pixels(no percentages). It defines how tall the video should appear on the webpage.

If used without the width attribute, the browser adjusts the width to maintain the original aspect ratio.

If neither width nor height is specified, the video is displayed in its default dimensions.

13. width

The width attribute in HTML specifies the display height of the video player in CSS pixels(no percentages). It defines how wide the video should appear on the webpage.

If used without the height attribute, the browser adjusts the height to maintain the original aspect ratio.

If neither width nor height is specified, the video is displayed in its default dimensions.

Tag Omission

The HTML <video> element must have have both start tag and end tag.

Usage Guidelines

Different browsers support varying video formats. To ensure compatibility, you can include multiple sources within nested <source> elements, allowing the browser to select the first one it recognizes.
If the controls attribute is not specified, the video player will not display the browser's default controls.
It's also a good practice to include fallback content, such as a direct download link or text, for users with browsers that do not support the <video> element.
You can add timed text tracks for subtitles, closed captions, chapter headings, and more by nesting the <track> element within the <video> element. These tracks are defined using the Web Video Text Tracks File Format (WebVTT) with .vtt files.

Frequently Asked Questions(FAQ)

How to insert video in HTML ?

In HTML, you can use the <video > element to embed video files into a webpage. The <video > tag supports different file formats like MP3, OGG, and WAV and provides built-in controls for playback.

How to Remove the Download Option from HTML video Tag ?

By default, the HTML <video > element provides built-in controls, including a download button in some browsers. You can remove the download option using the controlsList="nodownload" attribute . The below example will make it clear.


<video  src="video .mp3" controls controlsList="nodownload"></video >