Media Elements in HTML

Last time we have seen, HTML5 with its Key Features and new Elements. In this blog post, we will explore HTML Media Elements, with their significance in web development.

HTML Media Elements

HTML provides several media elements that allow developers to add audio and video to their web pages. Audio and video are powerful tools that can help make web content more engaging and interactive.

The media elements are supported by most modern web browsers and can be styled using CSS to provide a consistent look and feel across different browsers and devices. They also provide accessibility features, such as support for closed captions and screen readers.

HTML media elements are used to embed multimedia content, such as video, audio, and images, into a web page. These elements have a variety of attributes that can be used to customize their behavior and appearance.

HTML Audio Element

The HTML audio element allows developers to embed audio files into their web pages. The <audio> element can have child elements such as <source> to provide alternate formats.

Syntax :

<audio src="Source_Of_Audio_File" controls >
    ------------
</audio>

Example :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> HTML Audio Element </title>
    </head>
    <body>
        <audio src="CompTT_Welcome_Voice.mp3" controls >
            Yor browser does not support Media Elements
        </audio>
    </body>
</html>

Output :

HTML Video Element

The HTML video element allows developers to embed video files into their web pages. You can set the source URL, dimensions, controls, and autoplay properties for the video file.

Syntax :

<video src="Source_Of_Video_File" controls >
    ------------
</video>

Example :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> HTML Video Element </title>
    </head>
    <body>
        <video src="ComputerTipsTricks.mp4" controls width="400">
            Yor browser does not support Media Elements
        </video>
    </body>
</html>

Output :

HTML Source Element

The <source> element is typically used in conjunction with the <video> and <audio> elements to provide alternate media formats for compatibility with different browsers and devices.

The <source> element is used to specify multiple sources for the video file in different formats, to ensure compatibility with a wide range of browsers and devices.

The browser will automatically choose the appropriate source file to play from multiple sources, based on the browser's capabilities. If none of the specified sources are supported by the browser, then the given message will be displayed.

Syntax :

<source src="Source_Of_Video_File" type="video/mp4">

Example :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> HTML Source Element </title>
    </head>
    <body>
        <video controls >
            <source src="ComputerTipsTricks.mp4" type="video/mp4">
            
            <source src="ComputerTipsTricks.webm" type="video/webm">
            
            Yor browser does not support Media Elements
        </video>
    </body>
</html>

HTML Track Element

The <track> element is an HTML media element that is used to specify text tracks for media content, such as captions, subtitles, descriptions, or chapters. The track element is typically used in conjunction with the <video> and <audio> elements.

The <track> element provides an accessible way to add closed captions, subtitles, or other text tracks to media content, making it easier for people with hearing or visual impairments to access the content.

The <track> element supports several types of text tracks, including captions, subtitles, descriptions, and chapters. The text track file can be in one of several formats, such as WebVTT or TTML.

Syntax :

<track src="Captions_Source_File" kind=" " srclang=" " label=" ">

Example :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> HTML Track Element </title>
    </head>
    <body>
        <video controls>
            <source src="video_file.mp4" type="video/mp4">
            <track src="captions.vtt" kind="captions" srclang="en" label="English">
            Your browser does not support the Media element.
          </video>
    </body>
</html>

Attributes of Media Element

Attributes	Description
width	Specifies the width of the media element in pixels.
height	Specifies the height of the media element in pixels.
type	Specifies the MIME type of the media file.
loop	Specifies whether to loop the media playback.
muted	Specifies whether to mute the audio or not.
src	Specifies the URL of the media file to be embedded in the element.
preload	Specifies whether to preload the media content or not.
crossorigin	Specifies whether the media content should be treated as crossorigin or not.
playsinline	Specifies whether the video should be played inline on mobile devices or not.
autoplay	Specifies whether the media should start playing automatically when the page loads.
controls	Specifies whether to display the media player controls (play, pause, volume, etc.) or not.
poster	Specifies an image to be displayed as a placeholder before the media starts playing.
alt	Specifies alternative text for the media element, to be displayed if the media cannot be loaded.

So, now it's time to end the session. This is our last post on HTML Programming Languages.

I hope you learned well with us...!!!

Thanks for Visiting...!!!

Latest posts

Media Elements in HTML | Attributes of HTML Media Elements