video要素にsetAttributeで追加したmutedがFirefoxとchromeで効かない

setAttributeでmutedを指定した際に、Firefoxとchromeでミュートにならない現象に遭遇したのでメモ。

サンプルコード

まずはHTMLにvideoタグを直接記述してみます。

HTML

<div id="wrapper">
	<video muted autoplay src="video.mp4"></video>
</div>

この場合はFirefoxやchromeでもミュート状態で自動再生されます。
HTMLに直接記述した場合のデモページ
　

設定は同じで、JavaScriptから追加するように変更してみます。

HTML

<div id="wrapper"></div>

JavaScript

var video = document.createElement('video');
video.setAttribute('autoplay', true);
video.setAttribute('muted', true);
video.src = 'video.mp4';
document.getElementById('wrapper').appendChild(video);

この場合、Firefoxとchromeで自動再生はされるのですが、ミュート状態にはなりませんでした。
ミュート状態にならないデモページ
　

いろいろ試してみた結果、setAttribute()を使わないで指定するとFirefoxとchromeでもミュート状態になりました。

JavaScript

var video = document.createElement('video');
video.muted = true;
video.autoplay = true;
video.src = 'video.mp4';
document.getElementById('wrapper').appendChild(video);

対応後のデモページ