video 태그 muted 설정하기
HTML5 에서 video 태그가 추가됨으로써 동영상을 쉽게 삽입할 수 있게 되었다.
video 태그에는 몇 가지 속성 값을 정할 수 있다. autoplay, controls, muted 등이 있다.
<video>: 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN
HTML <video> 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, <audio> 요소가 사용자 경험에 좀 더 적합합니다.
developer.mozilla.org
controls
해당 속성을 명시하면 소리 조절, 동영상 탐색, 일시 정지 및 재시작 기능을 지원하는 컨트롤러 버튼을 제공한다.
컨트롤러 버튼을 사용해서 동영상을 음소거 할 수 있다.
그러나 컨트롤러는 영상에서 나타나는 위치가 정해져있고, 사용자가 원하는 아이콘으로 변경할 수 없다. 따라서 이를 변경하기 위해서는 사용자가 직접 버튼을 추가해야 한다.
muted
JavaScript
자바스크립트에서 동영상 muted 방법은 간단하다.
video.muted = true; //음소거
video.muted = false; //음소거 해제.muted 를 사용하면 된다.
기본 값은 false 이니, 동영상 음소거를 시키고 싶을 땐 muted 속성 값을 ture로 설정하면 된다.
반대로 음소거 상태에서 소리를 제공하고플 땐 muted 속성 값을 false로 설정하면 된다.
재생 중인 동영상이 음소거인지 아닌지 확인할 때도 해당 속성 값을 출력하면 된다.
개발자 도구의 console 창에서 video.muted 만 쳐주면 true, false 값으로 출력된다.
jQuery
제이쿼리에서는 prop() 함수를 사용한다.
video.prop('muted', true); //음소거
video.prop('muted', false); //음소거 해제
* setAttribute와 attr()은 동영상 음소거 시 먹히지 않는다.
