*

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

おすすめトピックス

関連記事

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

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

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

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

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

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

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

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

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

プレースホルダ
検索窓に薄い文字を入れて何を入力するのか分かりやすくするプレースホルダ

ネット上で何かを検索したい時、どこを見ますか? そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。 たまに見るのが検索窓に薄い文字で予 […]

著者について

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

フォローはこちら

       

       
エックスサーバーでメールが送れない「Client host rejected:Access denied」

エックスサーバーで作成したメールアカウントでメールを送信しよう

札幌駅パセオ地下1階のパスタとパフェが美味しい「プロヴァンス」でランチ

札幌駅のパセオ地下1階にあるプロヴァンスは南フランスとイタリア

千歳市の和食処「ほうりん」の安い充実の寿司ランチ

千歳市にある和食処ほうりんは千歳駅の南西にある居酒屋が立ち並ぶ

スパホテルソーレ
札幌のカプセルホテル「スパホテルソーレすすきの」に泊まった感想

札幌の地下鉄すすきの駅の近くにあるカプセルホテル「スパホテルソ

札幌駅近くのモダン和食レストラン「えりも亭」で珍しい縮れ蕎麦ランチ

札幌駅の北口から徒歩2分程度の所に和風なモダンレストラン「えり

→もっと見る