SetAttribute 속성보다 dot(.) 연산을 사용하자

Video / Audio muted

Muted property 같은 경우 이름 그대로 음소거 설정이다. 음소거를 하기 위해서는 control button의 음소거 버튼을 클릭>하거나 javascript를 이용해 설정이 변경가능하다. 변경을 하기 위해서는 muted 속성을 true로 변경하면 된다.

보통 속성을 변경하기 위해서 사용하는 javascript 옵션 같은 경우 setAttribute(), (.) operation 두 가지가 존재 한다. Javascript를 사용하는 사람이라면 충분히 많이 사용했을 것이라 생각한다. 다만, 무슨 이유인지는 모르겠지만, Muted option을 사용할 경우 Chrome / FireFox 에서는 setAttribute가 적용되지 않는다.

setAttribute option

아래의 소스코드는 w3c school의 muted option test code를 발췌한 것이다.

<!DOCTYPE html>
<html>
<body>

<button onclick="enableMute()" type="button">Mute sound</button>
<button onclick="disableMute()" type="button">Enable sound</button>
<button onclick="checkMute()" type="button">Check muted status</button><br>

<video id="myVideo" width="320" height="176" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
var vid = document.getElementById("myVideo");

function enableMute() {
  vid.setAttribute(muted,true);
  //vid.muted = true;
}

function disableMute() {
  vid.setAttribute(muted,false);
  //vid.muted = false;
}

function checkMute() {
  alert(vid.muted);
}
</script>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body>

위의 코드를 직접 컴파일 해보거나 귀찮으신 분들은 w3c school link를 타고 들어가 enableMute() / disableMute() 함수를 변경한 뒤 Run 동작을 눌러컴파일 해보길 바란다. 이후 실행을 해보면, Muted 동작이 수행되지 않는 것을 확인할 수 있다.

왜 그런지를 찾으려 노력했지만, 정확한 이유를 찾지는 못했다. 다만 그럴사한 흔적들을 발견해 공유하고자 한다.

몇 가지 흔적들..

해결 방법

해결 방법은 단순하다. setAttribute 말고 (.)을 사용하자!

w3c에 적혀있는대로 (.)연산자를 이용해 muted속성을 변경하자.

<!DOCTYPE html>
<html>
<body>

<button onclick="enableMute()" type="button">Mute sound</button>
<button onclick="disableMute()" type="button">Enable sound</button>
<button onclick="checkMute()" type="button">Check muted status</button><br>

<video id="myVideo" width="320" height="176" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
var vid = document.getElementById("myVideo");


function enableMute() {
  //vid.setAttribute(muted,true);
  vid.muted = true;
}

function disableMute() {
  //vid.setAttribute(muted,false);
  vid.muted = false;
}

function checkMute() {
  alert(vid.muted);
}
</script>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body>

위의 소스코드를 돌려보면 잘 동작하는 것을 확인할 수 있을 것이다. 어렵게 생각하지말고 (.)쓰자 :)