HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTML5でvideoタグのposter属性で動画のヒント画像を表示する方法について解説しています。動画埋め込みに使用されるvideoタグの基本構文、poster属性による表示画像の設定方法について学びましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

videoタグのposter属性で動画のヒント画像を表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

videoタグについて

HTML5では、動画の埋め込みに<video>タグを使用します。このvideoタグがあることで、Flash等のプラグインを使わずとも簡単に動画を埋め込むことができるようになりました。

Flashはadobeが2020年末にアップデート・配布共に終了すると言ってますし、その動きにApple、Facebook、Google、Microsoft、Mozillaとも協調して進めているとのことなので、これからはvideoタグの利用がますます増えそうです。

videoタグにおいて、基本コードはいたってシンプルです。

<video src="hoge.mp4" controls></video>

imgタグとは違い閉じタグがきちんと用意されている要素なので、<video>~</video>タグの中に様々な要素を入れ子にすることが可能です。

例えば、一番よく使われているのが、videoタグがサポートされていないブラウザを使用した場合に代わりにテキストを表示してくれるものです。

<video src="hoge.mp4"controls>
  <p>ブラウザが古くてvideo見れないね。ごめんね。</p>
</video>

このような感じになります。

 

poster属性の使い方

poster属性とは、映像のダウンロード中に表示される画像の URL を指定するものです。この属性の記述が無い場合はビデオの最初のフレームが読み込まれるまでは何も表示されず、フレームが読み込まれた後に最初のフレームをポスターフレームとして表示してくれます。ですが、読み込みが遅いとユーザーに動画がが埋め込まれていることを見落とされてしまう可能性があるので、poster属性はつけておいたほうがいいですね。

また、ブラウザが古いなど動画が動く環境でない場合に、動画の代わりに画像を表示させることができます。 poster属性で指定する画像は、ユーザーに動画の内容を知らせるような画像であることが望ましいです。 youtubeなどでよく見る最初の静止画像(サムネイル)のような役割を果たしてくれます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

poster属性を使って動画のヒントとなる画像を表示してみよう

使い方はいたって簡単です。videoタグにposter属性として記述するだけです。実際に動くコードを用意しました。

<video controls muted poster="http://writer.techacademy.jp/wp-content/uploads/2020/01/vs200129-001.png">
  <source src="https://magazine-cf.techacademy.jp/wp-content/uploads/2020/01/30095000/video.mp4"></source>
  <source src="https://magazine-cf.techacademy.jp/wp-content/uploads/2020/01/30095002/video.webm"></source>
</video>

 

これから動画も扱うことが増えてくるweb業界ですので、ぜひとも使ってみてください。

 

監修してくれたメンター

メンター増田直子

40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。

趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。