.mp4掲載(サムネイル画像あり)

目的

• .mp4動画をWebページに載せたい。
• 用意した画像をサムネイルに適用したい。

実行結果(※音が出ます)

解説

• サムネイル画像あり版です。
• 動画の縦横比率を変えずに、動画本来の比率で表示しています。
• 中央に再生ボタンがある事を踏まえてサムネイル画像を作りましょう。
• サムネイル画像なし版もあります。

HTML

<div class="layout_9_2">
	<video controls playsinline preload="metadata" poster="../../image/layout/9-2.jpg">
		<source src="../../video/layout/9-2.mp4" type="video/mp4">Your browser does not support the video tag.
	</video>
</div>

• サムネイル画像は動画と同じサイズにするのがオススメです。サムネイル画像の歪みや、再生時のガタつきが無くなります。動画がW960×H540なのでサムネイル画像もW960×H540にしています。

CSS

.layout_9_2 {
	width: 96%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	aspect-ratio: 960/540;
}

.layout_9_2 video {
	display: block;
	width: 100%;
}

• aspect-ratioの値は動画サイズをそのまま書けばOKです。上記動画はW960×H540なので7行目でaspect-ratio: 960/540;と書いています。