Javascriptでpc版とsp版で読みこむ動画を切り替える

Web制作の案件で、PC版、SP版で異なる動画を読むこむ箇所があり、その際読み込み速度に影響が出ないような処理を書いたので紹介します。

html

pc版、sp版共にvideoタグのsrcではなく、data-srcの中にパスを記述します。

<!-- pc版 -->
<video playsinline autoplay muted preload="none" poster="./img/poster.jpg" loop class="pc-video" id="js-video-pc" src="" data-src="./video/mv.mp4"></video>

<!-- sp版 -->
<video playsinline autoplay muted preload="none" poster="./img/poster-sp.jpg" loop class="sp-video" id="js-video-sp" src="" data-src="./video/mv-sp.mp4"></video>

css

表示はcssで切り替えています。

.sp-video {
  display: block;
}

.pc-video {
  display: none;
}

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

  .pc-video {
    display: block;
  }
}

Javascript

const videoPc = document.querySelector("#js-video-pc"); //pc版のビデオタグ
const videPcSrc = videoPc.getAttribute("data-src"); //pc版のビデオタグのdata-src

const videoSp = document.querySelector("#js-video-sp"); //sp版のビデオタグ
const videoSpSrc = videoSp.getAttribute("data-src"); //sp版のビデオタグのdata-src

let pcVideoBool = false;
let spVideoBool = false;

if (768 <= window.innerWidth) {
  //画面幅768pxより大きければpc版読み込み
  videoPc.src = videPcSrc;
  pcVideoBool = true;
} else {
  //それ以外の場合sp版読み込み
  videoSp.src = videoSpSrc;
  spVideoBool = true;
}

window.addEventListener("resize", () => {
  //画面をresize時
  if (768 <= window.innerWidth && !pcVideoBool) {
    //画面幅768pxより大きいかつ、pc版の動画をまだ読み込んでいない場合
    videoPc.src = videPcSrc;
    pcVideoBool = true;
  }

  if (768 > window.innerWidth && !spVideoBool) {
    //画面幅768px未満かつ、sp版の動画をまだ読み込んでいない場合
    videoSp.src = videoSpSrc;
    spVideoBool = true;
  }
});

まとめ

メリット

1. この実装の場合、ポスター画像をpc版、sp版共に使い分けることができる。
2. ユーザーが画面サイズを変更しても、読み込まれるようになっている

デメリット

1. ポスター画像を二種類読み込むことになってしまう。
2. ユーザーが画面サイズを変えると結局２つ読み込むことになってしまう。（我々実装者でなければ、あまりユーザーが画面サイズを変えることはないと思いますが...）

もっと良い実装方法などあれば教えていただけると幸いです。