videoタグを使ってサムネイルを表示させる方法について
結論から言えば、javascript（jQuery）を使って解決できます。
サンプル動画とサンプルソースを掲載しますので、ご参照ください。
サンプル動画
先日、山口県の角島に海水浴に行ってきた際の動画です。
この動画のスタートは、角島大橋の写真を入れているので、真っ白にならず特にサムネイルがなくてもいいですが、説明用にサムネイルを入れてます。
用意する画像は、2つ。
用意するパーツ
【1枚目の画像】
タイトルを入れた画像を用意。
今回は、背景を透かしたかったので、白の長方形オブジェクトを透過してます。
サムネイルのサイズは、表示させる動画と同じサイズに合わせます。
【画像名：damyvideo.png】とします。
【2枚目の画像】
再生ボタンを作成します。
今回は、100px ☓ 100pxで作成。
【画像名：icon_start.png】とします。
サンプルソースについて
HTML
<!— videoArea —> <div id=“videoArea”> <video id=“video” controls=“” height=“auto” width=“1000”> <source src=“movie/movie01.mp4” onclick=“this.play();” /> </video> <div id=“damyImg”><img src=“img/damyvideo.png” alt=“” width=“1000” height=“563”></div> <div id=“video-btn” class=“video-btn”><img src=“img/icon_start.png” alt=“” width=“100” height=“100”></div> </div> <!— /videoArea —>
7行目のID：damyImgの箇所に先程作成したパーツの「damyvideo.png」を記述。
9行目のID：video-btnの箇所に先程作成したパーツの「icon_start.png」を記述。
Sass
/*===========================================
videoArea
=============================================*/
#videoArea {
width: 1000px;
height: 563px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 0;
position: relative;
// クローム対策：動画再生ボタンクリック時、動画周りが青くなる現象を対処
video:focus {
outline: none;
}
#damyImg {
width: 1000px;
height: 563px;
position: absolute;
z-index: 90;
top: 0;
left: 0;
}
#video-btn {
width: 100px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 91;
left: 0;
right: 0;
top: 42%;
cursor: pointer;
}
}
javascript（jQuery）
/*===========================================
動画制御
=============================================*/
$(function(){
//video要素の取得
var video = document.getElementById(‘video’);
//videoボタンの取得
var video_btn = document.getElementById(‘video-btn’);
//状態保存
var btn_status = 0;
//画面クリックで再生・ポーズ
video_btn.addEventListener(‘click’, function () {
// サムネイル画像を非表示
$(“#damyImg”).css(“display” , “none”);
// 再生ボタンを非表示
$(“#video-btn”).css(“display” , “none”);
// 自動再生する
video.autoplay = true;
// 繰り返し再生する
video.loop = true;
// true：無音で再生 / false：音ありで再生
video.muted = false;
// 再生位置を指定する（秒）
video.currentTime = 0;
});
});
18行目、21行目の処理です。
その後、再生させることで自然な再生がはじまります。
これで、完成です。
この方法であれば、videoタグを使った動画再生も自分でサムネイル作って使用することができます。
せっかく作った動画ですが、再生してもらえないと意味ないですからね。
サムネイルのデザインはとても重要なので、ぜひ活用してください。
せっかくなので、Videoタグの属性について紹介させていただきます。
Videoタグの属性一覧
属性が何もない状態
<video src="samplefiles/20190807_sammple.mp4" width="600" height="auto"></video>
はい、何も再生されません・・・（笑）
autoplay：自動再生
<video autoplay muted src="samplefiles/20190807_sammple.mp4" width="600" height="auto" ></video>
auto属性を指定することで動画を自動再生させることができます。
chromeやsafariではmuted属性で動画の音がならないように設定する必要があります。
controls：操作パネルの表示
<video controls autoplay src="samplefiles/20190807_sammple.mp4" width="600" height="auto" ></video>
controls属性を記述すると再生ボタンや再生位置（シーク）、ボリュームなどのコントロールパネルが表示されます。
属性に値は必要ないのでcontrolsだけ記述すればOK！
loop：繰り返し再生
<video loop autoplay muted src="20190807_sammple2.mp4" width="600" height="auto" ></video>
loop属性を書くことで動画を自動で繰り返し再生させることができます。
poster：開始画面の画像（サムネイル）を設定
<video controls src="20190807_sammple2.mp4" poster="damyvideo.png" width="600" height="auto" ></video>
poster=”damyvideo.png” で、サムネイルを設定することができます。
poster画像は動画に静止画（サムネイル）を表示することができます。
設定した画像は動画が再生された時点で消え、一時停止しても再度表示されることはありません。クリックしたいと思うサムネイルを作成しましょう。
この記事の冒頭で、javascriptまで使ってサムネイルを表示させてたけど、posterを使用すれば簡単じゃん！って思いますよね。
Chromeで再生すると音声がミュート状態になります。
あるクライアント様で、Chromeでも再生させると最初から、音声をだしてほしいと言われました。
Chromeの仕様だと説明したのですが、どうしてもと言われたので、今回のようにjavascriptを駆使して作りました。
これにより、再生ボタンを押しても音がなった状態で、再生されるようになりました〜。
いや、なかなか苦労しましたが、ご要望にお応えてできて良かったです。
playsinline：Safariでインライン再生（埋め込んだ状態で再生）
<video controls muted playsinline src="20190807_sammple2.mp4" width="600" height="auto" ></video>
スマホのSafariで、サイトに埋め込まれてる動画を再生させると、モーダル（全画面）で再生されます。
個人的には嫌いではないのですが、挙動をあわせるときなどに使用します。
videoタグに「playsinline」を記述すれば、ページ内で再生されます。
preload：動画の読み込み設定
<video controls preload="none" src="20190807_sammple2.mp4" width="600" height="auto" ></video>
preloadはWEBサイトを読み込む際に、事前に動画ファイルをDLするかどうかの設定するのです。
- none：事前のファイルの読み込みを禁止
- metadata：長さやファイルサイズなどのメタ情報（動画の情報）だけを読み込む
- auto：初期値：動画ファイルを事前にダウンロードする
まとめ
いかがだったでしょうか？
Videoタグについて、この辺を理解・覚えていればある程度のことは対応できるかと思います。
ポイントは、Chromeでautoplayすると音声がならない！ってところですかね。
クライアント様に提案する際は、ここを押させて提案することをおすすめいたします。
最後まで、読んでいただきありがとうございました。
良かったら、制作した動画を見ていただけたら嬉しいです。
どーも、トミーです。
今回は、仕事でmp4の動画を埋め込む作業がありました。
今は、HTML5のおかげで比較的簡単に動画を実装することができるようになりました。
しかし今回組み込もうとした動画のはじめが、真っ白なんです・・・。
ブラウザによっては、あらかじめ動画の上に（▶）の再生ボタンが表示されるのですが、クロームには表示されず動画の部分だけ真っ白な空間ができてしまい、正直変・・・。
しかもChromeだと自動再生した場合、音声がなりません。
youtubeとかを埋め込めば、サムネイルを指定できますが、クライアント様は、youtubeは使いたくない！とのことでしたので、その解決方法をご紹介させていただきます。