HTML에서 비디오의 오디오 출력을 음소거 상태로 설정하려면 muted 속성을 사용하면 됩니다. 이 속성은 불리언(Boolean) 타입으로, <video> 태그에 추가하기만 하면 해당 비디오가 재생될 때 소리가 자동으로 음소거됩니다.
자동 재생(autoplay) 기능과 함께 사용할 때 특히 유용합니다. 대부분의 브라우저는 사용자 경험 보호를 위해 소리가 켜진 자동 재생을 차단하지만, muted 속성이 적용된 비디오는 자동 재생이 허용되기 때문입니다.
예제
다음 코드를 실행하여 muted 속성이 실제로 어떻게 동작하는지 확인해 보세요.
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls muted>
<source src = "/html5/foo.ogg" type = "video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
현재 브라우저는 video 요소를 지원하지 않습니다.
</video>
</body>
</html>코드 설명
- controls: 재생, 일시정지, 볼륨 조절 등 표준 컨트롤 패널을 화면에 표시합니다.
- muted: 비디오의 오디오 출력을 초기 음소거 상태로 설정합니다.
- <source>: 여러 개의 비디오 파일 형식(Ogg, MP4 등)을 지정하여, 브라우저가 지원하는 형식을 자동으로 선택하도록 합니다.
사용자는 컨트롤 패널의 볼륨 버튼을 통해 언제든지 소리를 직접 켤 수 있습니다. 참고로 JavaScript에서도 video.muted = true;와 같이 동적으로 음소거 상태를 제어할 수 있습니다.