Table of contents
Video Tag in HTML๐น
The ๐น video tag in HTML
embeds a media player
However, it has the following properties
src
: Where the path(relative) of the video ๐น is given. It can also be the URL.controls
: This attribute will give you the controls i.e. Buttons to use the features of the media player i.e. โถplay
,pause
โธ,forward
,full-screen
,download
,picture-in-picture
.type
: This refers to the type of video that we are going to add i.e.extension
(mp4
,)autoplay
: It willautoplay
your video ๐น when the page is being loaded.loop
: It will keep playing the video ๐น in a loop and also has a boolean value, the default value is false.๐
muted
: It has a boolean(true
/false
) value, where its default value is false the video will not be played even ifauto-play
is added andmuted
is not as an attribute.Also, you can provide
inline
styling.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<video
src="/HTML/video/video-demo.mp4"
width="400"
type="video/mp4"
controls
muted="false"
style="background-color: #777; padding: 20px"
autoplay="true"
loop
></video>
</body>
</html>
๐Audio Tag in HTML
The audio ๐ tag will embed the sound content in the document ๐.
And it will have the following attributes.
src
: will have a path (relative)or link ๐ where the audio file is been ๐ฌ stored.type
:audio
,mpeg
,ogg
are the types of audio files ๐ which can be added over.๐ฎ
controls
: will add all the controls toplay
โถ ,pause
โธ,seek
.autoplay
: will play the sound/audio as soon as the page is loaded.โฟ
loop
: will keep playing the audio in the loop.muted
๐: It's an attribute with a boolean value where the option to mute the audio ๐ is provided when the page is loaded.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Audio Tag in HTML</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<audio src="/HTML/sound/beats.mp3" controls autoplay loop></audio>
</body>
</html>
Thanks for reading.