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

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

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

videoタグの使い方

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

// HTML
<video src="sample.mp4"></video>

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

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

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

videoタグのサポート

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

can i useはこちら

検索結果がこちら

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

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

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

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

// HTML
<video src="sample.mp4" poster="thumbnail.jpg"></video>

もしくは

// HTML
<video poster="thumbnail.jpg">
 <source src="sample.mp4"></source>
</video>

poster属性を設定していない場合の表示

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

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

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

// HTML
<video src="sample.mp4#t=0.001" poster="thumbnail.jpg"></video>

まとめ

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