videoタグで動画のサムネイルが表示されないときの対処法 #HTML

video タグで動画を埋め込んだとき、iOSだとサムネイルが表示されないことがありました。

によると、

映像のダウンロード中に表示される画像の URL です。この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームをポスターフレームとして表示します。

となっています。poster 属性を使用して明示的に画像を指定すればよいのですが、今回は poster 属性を使用せず動画の最初のフレームをサムネイルに指定する方法を紹介します。

動画の特定のフレームをサムネイルに指定する方法

<source src="動画ファイル.mp4#t=[開始時間]" type='video/mp4'>

こうすることで、動画の任意の場所をposterに指定できます。

なので、最初のフレームをサムネイルに指定したいときは、

<video>
  <source src="動画ファイル.mp4#t=0.1" type='video/mp4'>
</video>

このように動画再生直後の秒数を指定してあげると設定できます。