HTML DOM의 Video muted 속성은 동영상의 오디오가 음소거(mute) 상태인지 여부를 나타내는 불리언(Boolean) 값을 반환하거나 설정하는 속성입니다. 이 속성을 활용하면 자바스크립트만으로 동영상 소리를 켜고 끄는 기능을 손쉽게 구현할 수 있습니다.
문법(Syntax)
muted 값 반환하기
현재 동영상의 음소거 상태를 불리언 값(true/false)으로 반환합니다.
mediaObject.muted
muted 값 설정하기
동영상의 음소거 상태를 지정한 불리언 값으로 설정합니다.
mediaObject.muted = booleanValue
여기서 booleanValue에 들어갈 수 있는 값은 다음과 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 동영상의 오디오가 음소거 상태가 됩니다. |
| false | 동영상의 오디오가 음소거되지 않고 소리가 재생됩니다. |
그럼 Video muted 속성을 실제로 사용하는 예제를 살펴보겠습니다.
예제(Example)
아래 예제에서는 두 개의 버튼을 만들어, 버튼 클릭에 따라 동영상의 음소거 상태를 전환하고 화면에 안내 메시지를 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video muted</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-muted</legend>
<video id="demo" width="320" controls><source src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails(1)" value="Day Time">
<input type="button" onclick="getTrackDetails(2)" value="Night Time">
<div id="divDisplay">
</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
function getTrackDetails(val) {
if(val === 1){
demo.muted = false;
divDisplay.textContent = '낮 시간입니다. 소리가 재생되어도 아무도 방해받지 않습니다';
}
else{
demo.muted = true;
divDisplay.textContent = '밤 시간입니다. 동영상이 기본적으로 음소거됩니다';
}
}
</script>
</body>
</html>실행 결과(Output)
'Night Time' 버튼을 클릭하면 muted 속성이 true로 설정되어 동영상이 음소거됩니다.
'Day Time' 버튼을 클릭하면 muted 속성이 false로 설정되어 동영상 소리가 정상적으로 재생됩니다.
정리
HTML DOM의 muted 속성은 동영상 요소의 오디오 음소거 여부를 읽고 쓸 수 있는 간단하면서도 유용한 기능입니다. 야간 모드에서 자동으로 음소거하거나, 사용자 인터랙션에 따라 소리를 켜고 끄는 등 다양한 UX 시나리오에 활용할 수 있습니다.