*

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

おすすめトピックス

関連記事

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

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

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

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

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

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

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

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

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

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

著者について

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

フォローはこちら

       

       
JA士幌町のスイートコーンとミルクの味わい「北海道のこだわりプリン」

士幌町の北海道のこだわりプリンをいただいて、とても美味しかった

Photoshopで写真の黄ばみや赤みを補正し抑える方法

デジカメで撮った写真が思ったより黄色かったという経験はありませ

簡単にPCのデスクトップキャプチャーができるソフト「FonePaw PC画面録画」のレビュー

パソコンの画面を録画するにはどうすればいいの? ウ

ホンダ純正Gathersドライブレコーダーでブザーが止まらない時の対処方法

近年煽り運転のニュースが世間を賑わせている中、ドライブレコーダ

Youtubeの動画でアンケートに回答するにはどうやるの?

いわゆる動画サイトには視聴者の方に意見を問うアンケート機能とい

→もっと見る