Html Media Elements

HTML5 introduced 5 most popular media element tags i.e. <audio>, <video>, <source>, <embed>, <track>. These media element tags changed the entire development using HTML. In this article, you will get to know about these five media element tags briefly.

Audio tag:

The <audio> is one of the HTML5 elements added to allow embedding audio files to a web page. Since not all browsers support all audio formats, the audio file is encoded using special codecs.

The <source> tag or the src attribute is used to indicate the variations of the same audio file. The path to an audio file can contain absolute or relative URLs.

Syn:-

<audio attributes></audio>
         OR
<audio attributes>
<source src="filename" type="audio/type">
</audio>

<audio controls autoplay loop mute>
        <source src="link name" type="audio type">
</audio>

src : URL => Specifies the path to the audio file.

controls : Displays the control panel (start button, scroll, volume control). If the controls attribute is missing, the audio file will not be displayed on the page.

autoplay: Plays the audio file automatically after loading the page.

**loop :**Repeat the audio file from the beginning after its completion.

muted : Mutes the sound when the audio file is played.

Video tag:

The <video> is one of the HTML5 elements added to allow embedding video files to a web page. Since not all browsers support all audio formats, the audio file is encoded using special codecs.

The <source> tag or the src attribute is used to indicate the variations of the same audio file. The path to an audio file can contain absolute or relative URLs.

Syn

<video attributes></video>
    OR
<video attributes>
    <source src="filename" type="video/mp4">
    ...
</video>

**src :**URL => Specifies the path to the video file.

controls : Displays the control panel (start button, scroll, volume control). If the controls attribute is missing, the video file will not be displayed on the page.

autoplay: Plays the audio file automatically after loading the page.

loop : Repeats continuously the audio file from the beginning after its completion.

muted : Mutes the sound when the audio file is played.

width : width of video player

height : height of video player

poster : to set wall poster/paper of video frameset & frame

iframe:

-> "iframe" stand for inline-frame, html5 rel tag

-> placing one webpage result within another webpage.

-> its paired tag & inline tag.

Syn

<iframe width="" height="" src=" link"
            title=" title name"
            frameborder=" "
            allow=
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen>
    </iframe>

marquee tag

-> Used to move text/element in different directions

-> Its deprecated tag. its paired tag

Syn

<marquee attributes>text|img| component </marquee>

attributes:

direction => down, up, left (default), right.

loop => continues moving (default).

scrollamount => 6.

scrolldelay => 84ms.

behavior => alternate.

source:

As you can observe that <audio>, <video> elements contain the <source> element, the <source> tag is used to attach multimedia files.

<source src="" type="">
   ...
</source>


<audio controls>
            <source src="audio.mp3"
                    type="audio/mp3">
        </audio>

Picture tag:

Html <picture> tag provides web developers with flexibility in defining image resources, particularly useful for art direction in responsive designs. It comprises <source> tags for different media queries and a <img> tag as a fallback. Attribute values are set to load the most suitable image.

The <img> element is used for the last child element of the picture declaration block. The <img> element is used to provide backward compatibility for browsers that do not support the element, or if none of the source tags matched.

<picture>
    Image and source tag
<picture>

 <picture>
        <source media="(min-width: 700px)" 
                srcset=" link ">

        <source media="(min-width: 450px)" 
                srcset=" link ">

        <img src="link" 
             alt=" alt text " 
             style="vlue;">
    </picture>

meta:

-> Data about data means we provide some info/details about a webpage. meta is unpaired.

-> meta is sub tag of <head> tag.

-> By using meta we can provide info to browser, search engines, users/programmers.

keywords:
<meta name="keywords" content="HTML, CSS, JavaScript">
description:
<meta name="description" content="HTML and CSStutotrial">
author:
<meta name="author" content=" ">
Refresh document:
<meta name="refresh" content=" ">
<meta http-equiv="refresh" content="time; url=URL">
Setting the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Attribute Values	Description
name	This attribute is used to define the name of the property.
http-equiv	This attribute is used to get the HTTP response message header.
content	This attribute is used to specify properties value.
charset	This attribute is used to specify a character encoding for an HTML file.
scheme	Determines a scheme to be utilized to decipher the value of the substance attribute.