GP HTML Media
Uploaded by
sodohe3963GP HTML Media
Uploaded by
sodohe3963Media in HTML
Overview
Multimedia is a different content than text that uses sound, music, videos, movies,
animations, etc., on the web. Multimedia consists of audio, video which can be added to
a web page. We can add audio, video and figures with the help of HTML media
elements.
Adding Audio and Video
HTML can embed audio and videos directly on a web page without any external
support.
● <video> element is used to add videos
● <audio> element is used to add audios
These elements are not sufficient to add the media. We need to control the media as
well. So, there are several tags and attributes that are required to add the media
entirely.
The <audio> and <video> are the same way the content is added to it, and only the tag
name is different.
controls Attribute
The controls attribute is necessary to add play, pause, and volume to the audio/video.
This gives you the ability to control the video and audio content.
source Tag
<source> element is used to serve the same media content in multiple formats so
that different browsers can run any of the files that it supports. It is an empty element.
src Attribute
The src attribute is used to specify the URL of the media file that is needed to be
played. This can have an absolute or relative path.
1
type Attribute
The type attribute is used to specify the media type of the media resource.
● Types for videos could be mp4, WMV etc.
● Types for audios could be MPEG,mp3 etc.
Example : Adding a video to a web page in different supported types for different
browsers
<video controls>
<source src="cn.mp4" type="video/mp4">
<source src="cn.wmv" type="video/wmv">
Your browser does not support the video tag.
</video>
Output :
autoplay and muted attribute
To start a video automatically, use the autoplay attribute and muted after autoplay to
let your video start playing automatically (but muted).
Example : <video controls autoplay muted>
<source src="cn.mp4" type="video/mp4">
<source src="cn.wmv" type="video/wmv">
Your browser does not support the video tag.
</video>
2
❖ By using the height and width attribute, the video size on a web page can also be
customized.
Example : Adding audio to a web page in different supported types for different
browsers
<audio controls>
<source src="cn.avi" type="audio/avi">
<source src="cn.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Output :
❖ Multiple source tags are used so that the audio plays if any one of the formats is
supported by the browser. Else, the text message will be shown.
NOTE : Autoplay and muted can also be used for the audio element.
Adding youtube videos
Youtube videos can also be directly added to your web page using the embed video
option on any youtube video.
<iframe> element is used to add the video with the src attribute but a shortcut to that
is simply to go to any youtube video and right-click on the video, then select the copy
embed code option.
3
Paste the code on the code editor, and the video will be added to the web page.
Example : <iframe width="400" height="200"
src="https://www.youtube.com/embed/wDiI2PGNPVI">
</iframe>
Output :
NOTE : controls, autoplay and muted attributes can also be used with iframe
