videoタグを使ってmp4動画を埋め込む際、videoタグのposter属性を使用してサムネイル画像を設定することが出来ます。しかし、ブラウザや端末、環境によってはこのposter属性に指定したサムネイル画像が表示されない場合があります。

今回の記事ではこのような場合の解決方法を解説したいと思います。

videoタグとは

videoタグとはHTML内に動画ファイルを埋め込むことが出来るタグです。videoタグの基本的な使い方は以下の通りです。

videoタグの基本的な記述

<video src="590-1.mp4" controls></video>

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

videoタグの基本的な記述方法は上記の通りです。src=””の中に埋め込みたい動画ファイルを指定します。controlsは動画下部に表示されるリモコンのようなものを有効にする記述です。

サムネイル画像を指定しない場合、サムネイル画像は自動的に動画の0秒の地点の映像が表示されます。

サムネイルを設定する記述

videoタグにサムネイル画像を指定する方法は以下のようにposter属性に画像を設定することで表示出来ます。

<video src="590-1.mp4" poster="590-1.jpg" controls></video>

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

poster属性に指定する画像形式はjpgでもpngでも問題ありません。
通常であればこのposter属性に指定するだけでmp4が再生されるまでの間はこのサムネイル画像が表示されます。

poster属性に指定したサムネイル画像が表示されない時の解決方法

さて、通常であれば上記でお伝えした通りposter属性を指定するだけでサムネイル画像を指定することが出来ますが、ブラウザや端末、環境によっては表示されないことがありました。この現象に遭遇した際、表示されなかったのはMacbook ProのSafariでした。ただし、全てのMacbook ProのSafariでこの現象が起こったわけでは無いのでどのような時にposter属性が反映されないかは分かりませんでした。

このようにposter属性が上手く反映されない場合、以下のように記述することでサムネイル画像を指定することが出来ます。

<video src="590-1.mp4#t=0.001" poster="590-1.jpg" controls></video>

このように動画ファイルの末尾に#t=0.001と指定します。

これは動画の再生位置を指定する記述です。このように記述すると指定した個所からの再生となります。0.001はほぼ最初からなので特に問題はありません。

この#=〇〇の部分にサムネイルとして表示したい動画の秒数を指定することで再生前のサムネイル画像を指定することが出来ます。

ただし、この方法で590-1.mp4#=5や590-1.mp4#=10のように指定してしまうと5秒目、10秒目から再生されてしまいます。なのでこのようにしてしてした場合、少し対策が必要となります。

JavaScriptで動画を最初から再生する

上記のようにサムネイル画像を指定するために再生位置を変えてしまった場合、JavaScriptで動画を最初から再生する処理を記述してあげる必要が出てきます。JavaScriptで動画を最初から再生する記述は以下の通りです。

<video src="590-1.mp4#t=5" poster="590-1.jpg" id="movie"></video>
<p id="start-btn" onclick="videostart()">START</p>

videoタグのcontrols属性は削除します。多分JavaScriptで再生ボタンを押したことを検知できると思いますが、ちょっとやり方が分かりませんでした。そのため自分で再生ボタンを作ります。

function videostart(){
  const startbtn = document.getElementById('start-btn');
  const video = document.getElementById('movie');
  video.controls = true;
  video.currentTime = 0;
  video.play();

}

id=”start-btn”をクリックした際、ユーザー定義関数videostartが処理されるようonclick="videostart()"と記述します。

videostart関数の中にある

video.currentTime = 0;
video.play();

この記述で動画の0秒の位置に移動して再生を開始しています。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

videoタグに関する関連記事

videoタグに関する記事は他にもご紹介しています。