【htmlコーディング】videoタグを使用してPCとスマホで動画を切り替える方法

こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！

今回は、videoタグを使用して、PCとスマホで動画を切り替える方法をご紹介します。
すごく簡単で便利なので、ぜひ参考にしてみてください。

videoタグとは？
videoタグの属性
PCとスマホで動画を切り替える
最後に

videoタグとは？

videoタグとは、HTML5で新しく追加されたタグで、動画ファイルを指定することができます。
基本的な使い方はこちらです。

<video src="video.mp4"></video>

こうするだけで、動画を配置することができます。

videoタグの属性

videoタグの属性もご紹介しておきます。

・src＝動画ファイルのパスを指定
・autoplay＝自動で再生させる
・autoPictureInPicture＝小画面再生
・controls＝コントロール操作
・width＝幅を指定
・height＝高さを指定
・loop＝繰り返し再生させる
・muted＝ミュートにする
・playsinline＝再生画面の領域
・poster＝再生前のサムネイル画像を指定
・preload＝動画読み込み

音声がいきなり鳴り出すと、ユーザーはすぐ閉じてしまうので、mutedは必ずつけるようにしましょう。

PCとスマホで動画を切り替える

PCとスマホでは、ウィンドウが横と縦なので、動画サイズが異なる場合も多いと思います。
JSを使って切り替える方法もありますが、cssで簡単に切り替えられる方法をご紹介します。

まず、videoタグを2つ用意し、下記のようにclassを追加します。

<video src="video_pc.mp4" class="pc-video"></video>
<video src="video_sp.mp4" class="sp-video"></video>

次に、cssで、下記のスタイルを追加します。

.pc-video {
    display: block;
}

.sp-video {
    display: none;
}

@media screen and (max-width: 768px) {
    .pc-video {
        display: none;
    }

    .sp-video {
        display: block;
    }
}

こうすることで、ウィンドウサイズが768px以上ときはPCの動画が表示され、768px以下のときはスマホの動画が表示されます。

最後に

以上、videoタグを使用して、PCとスマホで動画を切り替える方法をご紹介しました。

videoタグは、簡単でスタイルもある程度自由に追加できるので便利ですが、1つ注意なのが容量です。
PCは固定回線を使用している場合が多いのでそこまで気にしなくて良いかもしれませんが、スマホの場合は再生までに時間が掛かってしまうことが多いので、できるだけ容量を小さくしましょう。

5MB以内であれば問題ないでしょう。多くても10MB以内にするようにしましょう。