*

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

おすすめトピックス

関連記事

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

リストの表示数を制限する
HTMLでulタグのリスト項目の表示数を制限する

HTML で ul タグを使えば以下のようなリストを作れます。 リスト リスト リスト このようなやつですね。順序なしリストと呼ばれて、何かを箇条書する時に便利です。html タグでは以下のように記述します。 この箇条書 […]

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

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

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

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

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

著者について

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

フォローはこちら

       

       
札幌駅から一番近くのスープカレー、奥芝商店実家でランチ

北海道に来たからにはスープカレーを食べなきゃ!と心踊らせて観光

永山カレー
札幌の旧永山武四郎邸にあるカフェ、和洋折衷喫茶ナガヤマレストでランチ

札幌のサッポロファクトリーの隣にある永山記念公園には、北海道指

魚介のアヒージョ
江別市野幌の「カフェ&デリ マチノキ」で北海道食材豊かなディナー

江別市の野幌町、野幌駅の近くに江別市のフレンチレストラン「シェ

羽田空港第2ターミナルビル(ANA側)のスターバックスの場所はどこ?

羽田空港にはスターバックスが3店舗あります。第1ターミナルビル(JAL

北品川のカレー専門店、辛さ自由自在の「ロビンソンクルーソーカレーハウス」でランチ

ふとした事で東京に行く事になり、予定も立ててなかったのでどこで

→もっと見る