*

videoタグのmp4動画にもサムネイル画像を表示させるには

公開日: : ノウハウ

ニコニコ動画や Youtube を始め、インターネット上で動画を見たり配信する機会が珍しくない時代となりました。むしろ毎日アップロードされる動画が多すぎて見てもらう為の競争となっていると言っても過言ではありません。

そこで見てもらうための一つの工夫として挙げられるのがサムネイルです。サムネイルとは動画の表紙みたいなもので、インパクトのあるサムネイルであれば見てもらえる可能性が増えるであろうという事です。ニコニコ動画や Youtube でも個別にサムネイルを設定できるようになっています。

動画サイトではちゃんとサムネイル機能が実装されていますが、html5 でのウェブ制作において video タグで動画を表示させる場合にサムネイルを表示させる事はできるのだろうか?と思いました。

videoタグのサムネイル機能は?

まず例として video タグで動画を読み込ませてみます。

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

video タグで読み込んだ動画のサムネイルは、動画の一番最初のコマになっています。動画の一番最初が真っ黒な画面だったらサムネイルも真っ黒になってしまうのです。

この動画が重要視されている時代にサムネイルも設定できないのか!と息を巻いていたら、サムネイル機能ちゃんとありました。

video タグの動画にサムネイルを付けるには poster 属性を付けます。

<video src="video.mp4" poster="thumnail.jpg" controls></video>

「poster="thumnail.jpg"」の部分が重要。poster 属性に指定するのはサムネイル専用画像で、動画の場面を切り取っても良いですしサムネイル専用画像を作っても良いです。

poster 属性を付けると動画を読み込んだ時にはちゃんとサムネイル画像が表示されました。ここでは動画の途中の場面を切り取ってサムネイル画像にしてみました。これで動画を見る人は、この動画は猫の動画であるという事がわかるのです。最初のものより何の動画かわかりやすくなりました。

  • Pocket

おすすめトピックス

関連記事

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

動く炭酸
飲み物の写真がリアルに動き出す!フリーソフトSizzTassの使い方

知り合いに聞いたのですが、「料理の写真からぐつぐつと煮えたぎる写真を作れるソフトがあるらしいよ。テレビでやってた。」と。最初は何だそれは?と思って意味がよく理解できませんでした。 ソフト名を聞いて調べてみたのですが、確か […]

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だけというような細かな指定ができる擬似クラスがあります。 例えばリストの3番目の要素なら次のように指定します。 偶数番目の要素だけ指定したいなら… 奇数番目の要 […]

リファラーによってiframe内のリンク先をjavascriptで変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CS […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
郵便局の郵便配達が2020年を目処に土曜配達を廃止する見込み、代替方法は?

郵便配達の土曜日配達が2020年を目処に廃止される方向へ動いて

Androidスマホやタブレットの予測変換を1つだけ削除、消す方法

Android スマートフォンやタブレットで文字入力をしている

住所録がない場合でもダイレクトメールが送れる郵便局のサービス「かもめタウン」

ネットショップの仕事をしていた頃はダイレクトメールを送る為の住

彦根市の本格スパイスカレー専門店「カレー食堂ジャンゴ」でランチ

彦根市に本格スパイスカレー専門店「カレー食堂ジャンゴ」が201

Twitter公式Web版で複数アカウントの切り替えに対応!既存アカウントの追加方法

Twitter をいつもお使いであれば、複数アカウントを運用し

→もっと見る