videoタグで動画をレスポンシブに切り替える方法！

今回は、videoタグについて書いていこうと思います。

先日、案件でメインビジュアルに動画を設置するというものがあり、さらにPCとSPで動画を切り替えて欲しいと言う要望もありました。レスポンシブに対応させる方法など調べて実装してみたことを備忘録として書いていこうと思います。

正直、動画を使うことがあまりなかったので、戸惑いながら、手探りで実装してみました。

意外と簡単に実装できた反面、レスポンシブには少し苦戦したところもありましたので、記録しておこうと思います。

videoタグの基本的な使い方。

<video src="movie/mv.mp4" type="video/mp4"></video>

上記が基本的な記述です。

imgタグのように、srcで格納されている動画を指定してあげれば、動画を読み込んでくれます。

sourceでレスポンシブ対応させる。読み込む動画を切り替える。

切り替える方法としては簡単です。

<video>
  <source src="/movie/mv.mp4" type="video/mp4" media="(max-width: 799px)">
  <source src="/movie/mv.mp4" type="video/mp4">
</video>

上記のように、sourceを使用することで、読み込む動画を切り替えることができます。

pictureタグと同じ仕様で使えます。

sourceの使い方などは、以下に書いてますので参考にしてください。

関連記事

pictureタグの使い方。imgタグとの関連を調べてみた。

ホームページで画像が使用されていないサイトはありません。画像を表示させるのであれば、imgタグでも問題ないように思いますが、pictureタグがあるということは、何か使い分けがあるのでしょう。 と、いうことでpicture[…]

注意点としては、sourceの読み込み順です。sourceは、条件似合わなければ、下のコードを読み込むという仕組みになっています。

そのため、以下のようにすると、SPのとき表示を切り替えることができません。

<video>
  <source src="/movie/mv.mp4" type="video/mp4">
  <source src="/movie/mv.mp4" type="video/mp4" media="(max-width: 799px)">
</video>

<source src=”/movie/mv.mp4″ type=”video/mp4″>を記述したことで、こちらが適用されてしまうため、spになっても <source src=”/movie/mv.mp4″ type=”video/mp4″ media=”(max-width: 799px)”>の記述は適用されなくなってしまいます。

iPhoneでは正常に動作しないときがあった。

sourceを使った切替ですが、iPhoneでは不安定なときがあります。

キャッシュが残っていれば、確実にsourceが機能して動画が切り替わるのですが、キャッシュなしのときは正常に動作しないことがあります。

そのため、iPhone対策として以下のようにJavascriptでコントロールする方法がありましたので、記載しておきます。

<video id="opv" autoplay muted playsinline src=""></video>

まず、sourceを使わず直接videoタグにsrcで動画を指定します。

ただ、htmlに直接記述はしません。

srcの中は、jsでコントロールしてあげます。

const windowSp = window.matchMedia('(max-width:799px)').matches;

function movieSwitch() {
  if (windowSp) {
    video.attr("src", "/sp/movie/mv.mp4");
  } else {
    video.attr("src", "/movie/mv.mp4");
  }
}

movieSwitch();

window.matchMediaでpcとspを判断して、srcの中身がアクセスする端末によって切り替わります。

sourceが、iPhoneで正常に動作しないときに試してみてください。

videoタグの属性を覚えよう。

videoタグには、いくつか属性があります。

属性について書いていきますので、適時使い分けるようにしましょう。

最初は、使用頻度の高いであろう以下の属性３つを解説していきます。

1. autoplay属性
2. muted属性
3. playsinline属性

autoplay属性で動画を自動再生させる。

<video src="movie/mv.mp4" type="video/mp4" autoplay></video>

autoplay属性は、ページの読み込み完了と同時に動画を自動再生させるための属性です。

自動再生させる場合は、忘れずに設置してあげましょう。

クロームで自動再生されないときの解決策。

autoplay属性の注意点は、Chromeでは合わせてmuted属性を指定しないといけません。

Chromeは、シェアも高いブラウザなので、「autoplay属性を設定するときは、muted属性もセット！」と覚えておいてもいいかもしれません。

//Chrome対策の自動再生設定
<video src="movie/mv.mp4" type="video/mp4" autoplay muted></video>

最初に記述したコードをChrome対応にすると上記のようになります。

muted属性は消音（ミュート）にする属性。

autoplay属性とmuted属性はセット！と書きましたが、muted属性自体の効果も書いておきます。

muted属性の効果は、消音（ミュート）です。

したがって、Chromeに対応させると、設置した動画は音声が流れない使用になります。

こればっかりは、Chromeの仕様のためどうしようもありません。

動画の音声を流したい場合は、jsを使用して工夫が必要そうです。

playsinline属性で動画をインライン再生させる。

<video src="movie/mv.mp4" type="video/mp4" autoplay muted playsinline></video>

playsinline属性は、タグ内の動画をインラインで再生してください。という意味になります。

インライン再生とは、画面上（Web上に）埋め込んで再生してください。という意味です。ブラウジングしながら、動画の再生、制御（早送り、巻き戻し）などができます。

ただ、ChromeなどほとんどのPCブラウザについては、playsinline属性を指定しなくても、インライン再生をしてくれるので必須というわけではありません。

iPhoneでインライン再生するときは必須。

iPhoneでインライン再生させる場合は、playsinline属性が必須です。

Chrome同様にiPhoneはシェアの高い端末のため、playsinline属性も必須と考えた方がいいですね。

もし、iPhoneで動画が再生されない、インライン再生ができないときは、playsinline属性が設置されているか確認してみてください。

その他の属性を理解して、必要に応じて使い分ける。

ここまでは、ほぼ必須といっていいほどの属性を指定してきました。

<video src="movie/mv.mp4" type="video/mp4" autoplay muted playsinline></video>

上記は、必須といっても過言ではないでしょう。

コピペできるように控えておくのがいいでしょう。

さて、ここからは場面によって使い分けが必要な属性について書いていきます。

1. loop属性
2. poster属性
3. controls属性

loop属性で動画を繰り返し再生させる。

loop属性は、名前の通り動画を繰り替えし再生させるための属性です。

<video src="movie/mv.mp4" type="video/mp4" autoplay loop></video>

上記のようにautoplayと一緒に指定させることで、Webサイトが表示されたら自動再生して、繰り返し再生させることが可能になります。

poster属性で動画内容が表示されないときの対策をする。

動画が再生されない環境のときに、補足となる画像を表示させることができます。

<video src="movie/mv.mp4" type="video/mp4" poster="hogr.jpg></video>

動画が表示されないことによって、デザインが崩れてしまうのを防ぐことに使えます。

代替えの画像がある場合には、指定するようにしましょう。

controls属性を使用して動画のインタフェースを表示させる。

動画を制御するためのコントローラーを表示させることができます。

<video src="movie/mv.mp4" type="video/mp4" controls></video>

デザイン上の動画でなく、解説動画など動画のコントロールが必要な場合には表示させてあげましょう。

動画のコントロールは、JavaScriptを活用した方法もあります。

下記、記事の内容は実務で使用した内容ですので、参考になるかと。

関連記事

videoタグのコントロールをJavaScriptで行う方法。

本日も業務内で発生した問題を解決したので、記載していきます。 今回は、videoタグで動画を埋め込み、それをjsで制御する。と、いったものです。 正直、動画の再生制御は実装したことがなく、調べながらの作業でし[…]

動画ファイルの最適化について。

動画をウェブで使う際、ファイルの最適化は非常に重要です。
まず、圧縮ツールを使って動画ファイルのサイズを小さくし、画質を保ちながらデータ量を削減しましょう。
次に、**MP4（H.264）**形式はウェブでの互換性が高いため、最適な選択肢です。さらに、ビットレートを適切に調整することで、不要なデータを削減し、ページの読み込み速度を改善できます。

動画圧縮するためのオススメサイト。

動画を圧縮することができる、無料ツールを紹介しておきます。

ご自分の使いやすいものを使ってみてください。

最適なビットレートの調整は、適切なバランスを！

ビットレートの調整は、動画のファイルサイズと品質を最適化するための重要な要素です。
ビットレートが高いほど、動画の品質は良くなりますが、ファイルサイズが大きくなります。逆に低すぎると、画質が劣化するため、適切なバランスを保つことが大切です。

例えば、1080pの動画であれば、ビットレートは約5,000〜8,000kbpsが目安です。

ビットレートを調整することで、ウェブサイトの読み込み速度を改善するのにも役立ちます！

動画をアップする前に一度確認してみましょう。

ビットレートとは、動画や音声のデータが1秒間にどれだけ転送されるかを示す値で、通常はkbps（キロビット毎秒）やMbps（メガビット毎秒）で表されます。