< video > tag
HTML 5 introduces a unique < video > element that simplifies the process of integrating a media player within a webpage, enabling seamless video playback directly within the webpage content. In addition to videos, this feature also supports playing music and audio files. However, for audio specific needs, the < audio > element is a more suitable choice and is readily available in HTML 5.
The < video > tag is equipped with various attributes that facilitate the execution of multiple tasks.
for example
- Auto play - next video automatically begins after one
- control - the browser will provide to control video
- loop - automatically start the same video once this end
- height - adjust the height
- width - adjust the width
There are two different ways to mute a video in HTML
Step 1) Utilizing the mute property within the video element in HTML5
Muted attribute of < video > tag
In addition to the properties discussed earlier, the < video > element includes a Boolean attribute called muted. This attribute indicates to the media player that the audio output of the video should be silenced.
Syntax: -
< video controls muted >
Example: -
Program to display the use of mute attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>muted video</title>
<style>
body {
}
h1 {
color: white;
}
p{
color: crimson;
}
div{
text-align: center;
border: 2px solid crimson;
border-radius: 20px;
background-color:crimson;
}
video{
border-radius:20px;
}
</style>
</head>
<body>
<div>
<h1>how to mute an embedded video</h1>
<video controls muted width="80%" height="50%">
<source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type="video/mp4">
</video>
</div>
</body>
</html>
Output
In this code snippet, the standard HTML 5 video element has been employed, featuring a specified video source. Additionally, the element includes a muted attribute, which displays a mute icon below the video player along with other control functionalities. This allows users to conveniently toggle between muting and unmuting the video.
Step 2) By using the video DOM muted property
Rather than relying on the built-in muted attribute of the HTML5 video tag, a similar function can be achieved through the muted property available in JavaScript. To accomplish this, a variable needs to be defined, connected to the video element through DOM manipulation, and associated with the muted property. By assigning true for muting and false for unmuting, the desired functionality can be achieved.
Syntax: -
Video . muted = true
Example: -
Program to display the mute using JavaScript
< ! DOCTYPE html >
< html lang = " en " >
< head >
< meta charset = " UTF - 8 " >
< meta http - equiv = " X - UA -Compatible " content = " IE = edge " >
< meta name = " viewport " content = " width = device - width , initial - scale = 1.0 " >
< title > muted video using JavaScript < /title >
< style >
Button {
Border : 0.2px solid black ;
Border - radius : 20px ;
Background - color : white;
Color : crimson;
Padding : 4px 10px;
Margin : 0px 5px 10px 0px;
Font - size : 13px;
}
div{
border : 2px solid crimson;
text - align : center;
border - radius : 20px;
background - color : crimson;
}
h1{
color : white;
}
video{
border - radius : 20px;
margin : 0px 0px 10px 0px;
}
< /style >
< /head >
< body >
< div >
< h1 > how to mute an embedded video using Javascript < /h1 >
< button on click = " enable() " type = " button " > Mute < /button >
< button on click = " disable() " type = " button " > audio < /button >
< button on click = " check() " type = " button " > status < /button > < br >
< video id = " myVideo " width = " 310 " height = " 176 " controls >
< source src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type = " video / mp4 " >
< source src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type = " video / ogg " >
Your browser does not support HTML5 video.
< /video >
< /div >
< script >
var vid = document . get Element By Id ( " myVideo " );
function enable() {
vid . muted = true;
}
function disable() {
vid . muted = false ;
}
function check() {
alert ( vid . muted );
}
< /script >
< /body >
< /html >
Output
In this code snippet, a JavaScript function is implemented to handle muting and unmuting actions instead of utilizing the mute attribute directly. Initially, a video element is employed to display a video within the webpage. Three distinct functions - mute, audio, and status - are defined to manage various functionalities triggered by the JavaScript onclick event. Within these functions, the video is set to be muted by assigning video.muted = true in the mute function, and unmuted by setting video.muted = false in the audio function. Additionally, a notification feature is implemented for the third button action.