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). Audio Attributes
- 2). Video Attributes
- 3). Iframe Attributes
- 4). Embeding Attributes
- 5). Image Attributes
Type of media Attributes:
(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 |
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 |
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
andwidth
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 |
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 |