HTML5のvideoタグでmp4の動画データを再生させる際に、再生ボタンを押すまでの間に表示させておく画像を、自由に変更する方法のご紹介です。
今回はMacでの操作方法になります。
<video>でmp4動画再生前に任意の画像を表示させる手順
まずはmp4形式の動画をOGGやwebm形式に変換します。具体的な方法は、以下のvideoタグでmp4動画をサイトに埋め込む方法の関連記事にまとめていますので、そちらの記事を参考にしてみてください。
関連ページ
mp4動画をogg 形式に変換できる「Miro Video Converter」の使い方
次に、mp4動画を再生して、再生前の画像として表示したいコマのスクリーンショットを撮るか、別の画像を用意して、PNGやJPGなどの形式で画像で保存します。（今回は違いがわかりやすいように、サンプル動画とは関係がない別のフリー素材の画像を再生前に差し込みます）
なお、動画のシーンとは関係ないない別の画像を用意する場合は、動画のアスペクト比でトリミングしておきます。
今回のサンプル動画はhttp://japanism.info/waterfall-free-video.html様のものを使用させていただいております。
最後に、以下のように<video>タグの
poster属性で、再生までに表示させる画像を指定します。
|
1 2 3 4 5 |
<video controls preload poster="./sample.jpg"> <source src="./sample.mp4" type="video/mp4"> <source src="./sample.ogv" type="video/ogv"> <source src="./sample2.webm" type="video/webm"> </video> |
サンプル動画の表示比較
まずはposterで画像を指定しない場合ですが、以下のように動画が表示されますが、posterで画像を指定すると、画像が変更されて表示されるようになりました。
コメント