JavaScriptで自動再生のvideoを埋め込む時の注意点

自動再生するvideoをJavaScriptで埋め込む機会があったのですが、iOS系の端末だけ再生されないということがあったので、その際の対応方法をメモしておきます。

うまくいかなかった場合

HTMLは以下のようにします。

<div class="box">
  <div id="mv"></div>
  <div class="front"></div>
</div>

#mv内にvideoタグを追加する想定です。

次にCSSです。

.box {
	position: relative;
}
#mv {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#mv video {
	width: 100%;
	height: 100%;
}
.front {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 360/640*100 */
}

最後にJavaScriptです。

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

videoを作成して各属性を追加して、#mvに追加しています。
これで問題ないと思っていたのですが、iOS端末で自動再生が開始されませんでした。
うまくいかなかった場合のデモページ
　

対応方法

いろいろ試してみた結果、playsinlineの設定方法を変更するとiOSでも再生できるようになりました。

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

setAttribute()を使って設定する形に変更しています。
対応後のデモページ