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

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

videoタグとは？

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

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

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

videoタグの属性

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

音声がいきなり鳴り出すと、ユーザーはすぐ閉じてしまうので、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以内にするようにしましょう。