Different HTML Medias and its Example

HTML medias and its example:

Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples:
Images, music, sound, videos, records, films, animations, and many more.

HTML5 media element use focuses on their primary purpose, which is to play media resources. We might use JavaScript to craft new controls or improve the accessibility of the content, and eventually we’ll see what we can do with media controllers and multiple tracks.

(1). HTML<Audio>

Before HTML5 arrived on the scene, there was no standard for playing audio files on a web page, Therefore, the only way to play audio files was to use a plug-in such as flash. Now, the HTML5 <audio> element specifies a standard way to embed audio in a web page. Moreover, playback may be controlled using JavaScript.

It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.

Audio Example:

Output:

Note: The audio tag is not supported in Internet Explorer 8 and earlier versions.

Attribute Value Description
autoplay autoplay This Boolean attribute specifies that the audio will automatically start playing as soon as it can do so without stopping to finish loading the data.
controls controls If specified, the browsers will display controls to allow the user to control audio playback, such as play/pause, volume, etc.
loop loop This Boolean attribute specifies that the audio will automatically start over again, upon reaching the end.
muted muted This Boolean attribute specifies whether the audio will be initially silenced. The default value is false, meaning that the audio will be played.
preload auto
metadata
none		 Provides a hint to the browser about whether to download of the audio itself or its metadata. The autoplay attribute can override this attribute, because if you want to automatically play a audio, the browser will obviously need to download it.
src URL Specifies the location of the audio file. Alternatively, you can use the preferred <source> tag as it allows for multiple options.

(2). HTML <video>

HTML <video>:

The HTML Video element (<video>) embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.

The <video> tag was introduced in HTML 5 (officially referred to as HTML5 - without the space). HTML5 video is now widely implemented in the major browsers and it has support from major websites such as YouTube.

Video Example:


Output:

Note: The video tag is not supported in Internet Explorer 8 and earlier versions.


Video tag Specific Attributes


The following table shows the attributes that are specific to the <video> tag.

Attribute Value Description
autoplay autoplay This Boolean attribute specifies that the video will automatically start playing as soon as it can do so without stopping to finish loading the data.
controls controls If specified, the browsers will display controls to allow the user to control video playback, such as play/pause, volume, etc.
height pixels Sets the height of the video's display area.
loop loop This Boolean attribute specifies that the video will automatically start over again, upon reaching the end.
muted muted This Boolean attribute specifies whether the video will be initially silenced. The default value is false, meaning that the audio will be played when the video is played.
poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button. If this attribute isn't specified, nothing is displayed until the first frame of the video is available; then the first frame is displayed as the poster.
preload auto
metadata
none		 Provides a hint to the browser about whether to download of the video itself or its metadata. The autoplay attribute can override this attribute, because if you want to automatically play a video, the browser will obviously need to download it.
src URL Specifies the location of the video file to embed. Alternatively, you can use the preferred <source> tag as it allows for multiple options.
width pixels Sets the width of the video's display area.

(3). Html <iframe> Attributes And Its Example

<iframe> Attribute :

The <iframe> tag creates an inline frame for embedding third-party content (media, applets, etc.). The content of the frame and the web page are independent, but they can interact through JavaScript. The HTML <iframe> tag is used to specify an inline frame, or, as the HTML5 specification refers to it, a nested browsing context.

An iframe or inline frame is used to display external objects including other web pages within a web page. An iframe pretty much acts like a mini web browser within a web browser. Also, the content inside an iframe exists entirely independent from the surrounding elements. Not all browsers support frames. we must define an alternate text, which will be displayed to the user, if the browser cannot display the content of the frame.

form Example :

 
<iframe src="https://aimtocode.com/user/" style="height: 1000px; width: 100%"></iframe>

(5). Embeding YouTube Video in HTML

HTML5 embeding YoutTube Video

Embeding video onto a web page is not relatively easy, because browsers does not have a uniform standard for defining embedded media files onto a web browser. However YouTube will host your videos and you can easily embed them into your website. Knowing how to embed YouTube videos allows you to build user experience on your web page even more.

Important for Embeding YoutTube Video:

  • The <iframe> tag is used to embed a video from YouTube in a website or web page.
  • The <video> and <embed> tags are similar, but the <iframe> tag is the recommended tag for displaying Youtube videos.
  • The <iframe> element can support any sort of YouTube video format.
  • We'll guide you through the steps to learn how to embed a Youtube video on your page.

Steps to learn how to embed a YouTube video onto a site.

  • Visit Youtube and upload a video.
  • Copy the video ID. If the URL looks like this: https://www.youtube.com/watch?v=Ok-TRRSV9HI, the ID will be Ok-TRRSV9HI.
  • Specify an <iframe> element in the web page.
  • Write the src attribute as https://www.youtube.com/watch?v=Ok-TRRSV9HI[Your_Video_ID]. In this case, it is https://www.youtube.com/embed/Ok-TRRSV9HI.
  • Define size with the height and width attributes.
  • Add parameters in the tag code depending on the settings you wish.
Attribute Value Description
autoplay autoplay This Boolean attribute specifies that the audio will automatically start playing as soon as it can do so without stopping to finish loading the data.
controls controls If specified, the browsers will display controls to allow the user to control audio playback, such as play/pause, volume, etc.
loop loop This Boolean attribute specifies that the audio will automatically start over again, upon reaching the end.
muted muted This Boolean attribute specifies whether the audio will be initially silenced. The default value is false, meaning that the audio will be played.
preload auto
metadata
none		 Provides a hint to the browser about whether to download of the audio itself or its metadata. The autoplay attribute can override this attribute, because if you want to automatically play a audio, the browser will obviously need to download it.
src URL Specifies the location of the audio file. Alternatively, you can use the preferred <source> tag as it allows for multiple options.

(6). HTML <Image> Tag and Its Example

HTML image tag:

The <img> element is one of the most important in web designing and to displaying a static image on a page. You should normally use it whenever an image is actually a part of the content.

All<img> tags must have a defined src attribute.

This defines the image to be displayed. Typically, the src is a URL, but a data representation of the image can also be used in some cases.

Example :

<center>
<img src="app-assets/images/course-images/html-programming-2.png"></img>
</center>

Output :


Image Alignment Attributes

The HTML <img> tag also supports the following additional attributes −


Attribute Value Description
align top
bottom
middle
left
right		 Deprecated− Specifies the alignment for the image.
alt text Specifies alternate text
border pixels Deprecated − Specifies the width of the image border.
crossorigin anonymous use-credentials It allows images from third-party sites that allow cross-origin access to be reused with canvas.
height pixels or % Specifies the height of the image.
hspace pixels Deprecated − Amount of white space to be inserted to the left and right of the object.
ismap URL Defines the image as a server-side image map.
longdesc text Deprecated − Specifies a URI/URL of a long description - this can elaborate on a shorter description specified with the alt attribute.
src URL the url of an image
usemap #mapname Defines the image as a client-side image map and used alongwith <map> and <area> tags.
vspace pixels Deprecated − Amount of white space to be inserted to the top and bottom of the object.
width pixels or % Sets the width of an image in pixels or in %.

Browser Support:


Chrome Firefox IE Opera Safari Android
Yes Yes Yes Yes Yes Yes