みかづきブログ・カスタム

基本的にはちょちょいのほいです。

動的に生成したvideoタグを自動再生するときはmuted属性ではなくプロパティを変更する 🎥

f:id:kimizuka:20201102125631p:plain

ビデオをミュートにすれば自動再生できることは知っていたので、

const video = document.createElement('video');

// ミュートに設定
video.setAttribute('muted', 'muted');

video.setAttribute('autoplay', 'autoplay');
video.setAttribute('loop', 'loop');
video.setAttribute('playsinline', 'playsinline');

document.body.appendChild(video);

という感じで設定してみましたが、

OMException: play() failed because the user didn't interact with the document first.

とエラーが出てしまいました。

const video = document.createElement('video');

// ミュートに設定
video.muted = true;

video.setAttribute('autoplay', 'autoplay');
video.setAttribute('loop', 'loop');
video.setAttribute('playsinline', 'playsinline');

document.body.appendChild(video);

という感じで、muted属性ではなく、プロパティとしてのmutedにtrueを入れたら動くようになりました。