.mp4掲載(サムネイル画像なし)

目的

• .mp4動画をWebページに載せたい。
• サムネイル画像を作る手間を省くため、一時停止したシーンをサムネイル化したい。

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

解説

• サムネイル画像なし版です。
• 動画の縦横比率を変えずに、動画本来の比率で表示しています。
• サムネイル画像あり版もあります。

HTML

<div class="layout_9_1">
	<video controls playsinline preload="metadata" onended="this.currentTime=0.001; this.pause();">
		<source src="../../video/layout/9-1.mp4#t=0.001" type="video/mp4">Your browser does not support the video tag.
	</video>
</div>

• ブラウザによっては再生前の画面が真っ白になる(サムネイルが無い)ので#t=0.001と書く事で0.001秒時点の映像を出し、実質的にサムネイルにしています。サムネイルを変えたい場合は目当ての映像の時間を入れます。7.2秒時点の映像をサムネイルとして使いたければ#t=7.2に変えてください。
• ブラウザによっては再生終了時も画面が真っ白になるのでonended="this.currentTime=0.001; this.pause();と書き、0.001秒時点の映像をサムネイル化しています。

CSS

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

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

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