【初心者向け・HTML】videoタグにサムネイルを設定する方法を現役エンジニアが解説

• HTML
• プログラミング

こんにちは、webエンジニアのtakaです。

今回の記事では動画を出力する際に利用するvideoタグに、サムネイルを設定する方法を記載していきたいと思います。 それでは早速見ていきましょう！！

目次

• 1 videoタグの使い方
• 2 videoタグのサポート
• 3 videoタグにサムネイルを設定する方法
  • 3.1 poster属性を設定していない場合の表示
• 4 poster属性を設定してもサムネイルが表示されない場合
• 5 まとめ

videoタグの使い方

まず、html上でvideoタグを設定する方法を見ていきましょう。

imgタグの使い方と同じようにsrc属性に出力する動画ファイルのパスを記載します。

動画の拡張子はmp4・ogv・webmなどに対応しています。

携帯で撮影した動画で「.MOV」という拡張子のものがあります。 mov形式を対応しているブラウザはSafariぐらいなので、mp4などに変換しましょう。

videoタグのサポート

一部のブラウザではvideoタグのサポートはまだと言われていました。 実際はどうなのか「can i use」というHTMLやCSSがブラウザにサポートされているか確認できるサイトで確認してましょう。

can i useはこちら

検索結果がこちら

全体の98.4%がサポートできている（2021年10月現在）ので、問題なく使って良いでしょう。

tips!

今回のvideタグに限らず、少し特殊そうなCSSなどはcan i useで確認してみましょう

videoタグにサムネイルを設定する方法

本題のvideoタグにサムネイルを設定する方法です。

videoタグのposter属性にサムネイルの画像のパスを設定することで、表示することができます。

もしくは

poster属性を設定していない場合は、動画の1フレーム目がサムネイルとして表示されます。

poster属性を設定してもサムネイルが表示されない場合

動画urlの末に「#t=0.001」を記載することで表示される場合があるので、試してみてください。

tips!

設定するサムネイルは、画像サイズが小さい方がSEO対策になります。画像圧縮するおすすめ無料webサイトはこちら。 このブログでもお世話になっています。

まとめ

今回はwebサイトで動画を出力する際にvideoタグにサムネイルを設定する方法を記載していきました。 それでは良い開発ライフを！