HTML5:videoタグの動画再生・Chromeで自動再生すると音声が鳴らない

HTML5:videoタグの動画再生・サムネイルを自分で作る
末富 将也

どーも、トミーです。
今回は、仕事でmp4の動画を埋め込む作業がありました。
今は、HTML5のおかげで比較的簡単に動画を実装することができるようになりました。

しかし今回組み込もうとした動画のはじめが、真っ白なんです・・・。
ブラウザによっては、あらかじめ動画の上に(▶)の再生ボタンが表示されるのですが、クロームには表示されず動画の部分だけ真っ白な空間ができてしまい、正直変・・・。
しかもChromeだと自動再生した場合、音声がなりません。

youtubeとかを埋め込めば、サムネイルを指定できますが、クライアント様は、youtubeは使いたくない!とのことでしたので、その解決方法をご紹介させていただきます。

videoタグを使ってサムネイルを表示させる方法について

結論から言えば、javascript(jQuery)を使って解決できます。
サンプル動画とサンプルソースを掲載しますので、ご参照ください。

サンプル動画

先日、山口県の角島に海水浴に行ってきた際の動画です。
この動画のスタートは、角島大橋の写真を入れているので、真っ白にならず特にサムネイルがなくてもいいですが、説明用にサムネイルを入れてます。

用意する画像は、2つ。

用意するパーツ

パーツ1

【1枚目の画像】
タイトルを入れた画像を用意。
今回は、背景を透かしたかったので、白の長方形オブジェクトを透過してます。

サムネイルのサイズは、表示させる動画と同じサイズに合わせます。

【画像名:damyvideo.png】とします。

パーツ2

【2枚目の画像】
再生ボタンを作成します。
今回は、100px ☓ 100pxで作成。

【画像名:icon_start.png】とします。

サンプルソースについて

HTML

7行目のID:damyImgの箇所に先程作成したパーツの「damyvideo.png」を記述。
9行目のID:video-btnの箇所に先程作成したパーツの「icon_start.png」を記述。

Sass

末富 将也
クロームで動画を再生すると、動画の周りが青くなるのが気になったので、16〜18行目にそれを対処するためにコードを記載してます。

javascript(jQuery)

 

末富 将也
ポイントは、再生ボタンをクリックした際にサムネイル画像(#damyImg)と再生ボタン(#video-btn)を消します。
18行目、21行目の処理です。
その後、再生させることで自然な再生がはじまります。
補足情報
動画を途中から再生させたい場合は、「video.currentTime = 10;」とすると、10秒後から動画を再生することができます。

これで、完成です。
この方法であれば、videoタグを使った動画再生も自分でサムネイル作って使用することができます。
せっかく作った動画ですが、再生してもらえないと意味ないですからね。
サムネイルのデザインはとても重要なので、ぜひ活用してください。

せっかくなので、Videoタグの属性について紹介させていただきます。

Videoタグの属性一覧

属性が何もない状態

はい、何も再生されません・・・(笑)

autoplay:自動再生

auto属性を指定することで動画を自動再生させることができます。
chromeやsafariではmuted属性で動画の音がならないように設定する必要があります。

controls:操作パネルの表示

controls属性を記述すると再生ボタンや再生位置(シーク)、ボリュームなどのコントロールパネルが表示されます。
属性に値は必要ないのでcontrolsだけ記述すればOK!

loop:繰り返し再生

loop属性を書くことで動画を自動で繰り返し再生させることができます。

poster:開始画面の画像(サムネイル)を設定

poster=”damyvideo.png” で、サムネイルを設定することができます。

poster画像は動画に静止画(サムネイル)を表示することができます。
設定した画像は動画が再生された時点で消え、一時停止しても再度表示されることはありません。クリックしたいと思うサムネイルを作成しましょう。

末富 将也
ここで、おや!?っと思った方がいると思います。
この記事の冒頭で、javascriptまで使ってサムネイルを表示させてたけど、posterを使用すれば簡単じゃん!って思いますよね。
注意
Chromeで再生すると音声がミュート状態になります。

あるクライアント様で、Chromeでも再生させると最初から、音声をだしてほしいと言われました。
Chromeの仕様だと説明したのですが、どうしてもと言われたので、今回のようにjavascriptを駆使して作りました。
これにより、再生ボタンを押しても音がなった状態で、再生されるようになりました〜。

いや、なかなか苦労しましたが、ご要望にお応えてできて良かったです。

playsinline:Safariでインライン再生

スマホのSafariで、サイトに埋め込まれてる動画を再生させると、モーダル(全画面)で再生されます。
個人的には嫌いではないのですが、挙動をあわせるときなどに使用します。
videoタグに「playsinline」を記述すれば、ページ内で再生されます。

補足情報
インライン再生させるには、autoplay、muted、playsinlineの3つの属性が必須です。

preload:動画の読み込み設定

preloadはWEBサイトを読み込む際に、事前に動画ファイルをDLするかどうかの設定するのです。

preloadのパラメーター
  • none:事前のファイルの読み込みを禁止
  • metadata:長さやファイルサイズなどのメタ情報(動画の情報)だけを読み込む
  • auto:初期値:動画ファイルを事前にダウンロードする

まとめ

いかがだったでしょうか?
Videoタグについて、この辺を理解・覚えていればある程度のことは対応できるかと思います。
ポイントは、Chromeでautoplayすると音声がならない!ってところですかね。
クライアント様に提案する際は、ここを押させて提案することをおすすめいたします。

最後まで、読んでいただきありがとうございました。

HTML5:videoタグの動画再生・サムネイルを自分で作る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA