setAttributeでmutedを指定した際に、Firefoxとchromeでミュートにならない現象に遭遇したのでメモ。
サンプルコード
まずはHTMLにvideoタグを直接記述してみます。
HTML
1 2 3 | <div id="wrapper"> <video muted autoplay src="video.mp4"></video></div> |
この場合はFirefoxやchromeでもミュート状態で自動再生されます。
HTMLに直接記述した場合のデモページ
設定は同じで、JavaScriptから追加するように変更してみます。
HTML
1 | <div id="wrapper"></div> |
JavaScript
1 2 3 4 5 | 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
1 2 3 4 5 | var video = document.createElement('video');video.muted = true;video.autoplay = true;video.src = 'video.mp4';document.getElementById('wrapper').appendChild(video); |
コメントが承認されるまで時間がかかります。