Posted at

iOSでvideoタグをinline再生する

More than 1 year has passed since last update.

iOS上でvideoタグをフルスクリーンではなくinlineで再生したい場合がある。


  1. videoタグを再生ではなく、currentTimeを動かす→iPhone Safariで動画をインライン再生する方法

  2. iOS10の場合、videoタグにwebkit-autoplayesinlineとplaysinlineを指定する→ iOS 10 Safari から video の inline 再生が可能になります

2の場合

<video id="backgroundvideo" webkit-playsinline playsinline autoplay loop>

<source src="./video.webm" type="video/webm">
<source src="./video.mp4" type="video/mp4">
<p>動画を再生できる環境ではありません。</p>
</video>

という風に2つ指定してあげて下さい。