• RSS

[HTML]videoタグでmp4動画を再生前に任意の画像を表示させる方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

今回はMacでの操作方法になります。

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

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



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

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

今回のサンプル動画はhttp://japanism.info/waterfall-free-video.html様のものを使用させていただいております。

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


サンプル動画の表示比較

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



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




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください