*

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

おすすめトピックス

関連記事

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

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

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

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

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

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

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

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

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

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

著者について

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

フォローはこちら

       

       
郵便局広告のパンフレット枠でチラシ広告を出してみた

事業やサービスを宣伝する広告形態には、ネット広告、新聞折込広告

南彦根であんかけちゃんぽんが有名な「めんや三平」でランチ

彦根市ではちゃんぽんを提供するラーメン屋もたくさんありますが、

Premiere Elementsで動画の音声だけwaveやmp3で出力する方法

Premiere Elements は動画編集ソフトですが、音

WordPressでログイン時だけ表示する条件分岐を行うには?

WordPress では色々条件分岐があります。トップページだ

チョコと練乳が濃厚なクッキー「北海道美瑛ミルクサンド」| フェルム・ラ・テール

先日北海道のお土産をいただいてとても美味しかったので紹介したい

→もっと見る