スポンサード

HTML5のvideoタグでmp4の動画データを再生させる際に、再生ボタンを押すまでの間に表示させておく画像を、自由に変更する方法のご紹介です。

<video>でmp4動画再生前に任意の画像を表示させる手順

まずはmp4形式の動画をOGGやwebm形式に変換します。具体的な方法は、以下のvideoタグでmp4動画をサイトに埋め込む方法の関連記事にまとめていますので、そちらの記事を参考にしてみてください。



次に、mp4動画を再生して、再生前の画像として表示したいコマのスクリーンショットを撮るか、別の画像を用意して、PNGやJPGなどの形式で画像で保存します。（今回は違いがわかりやすいように、サンプル動画とは関係がない別のフリー素材の画像を再生前に差し込みます）

なお、動画のシーンとは関係ないない別の画像を用意する場合は、動画のアスペクト比でトリミングしておきます。


最後に、以下のように<video>タグのposter属性で、再生までに表示させる画像を指定します。

サンプル動画の表示比較

まずはposterで画像を指定しない場合ですが、以下のように動画が表示されますが、



posterで画像を指定すると、画像が変更されて表示されるようになりました。

スポンサード