html

<div class="loading">
  <div class="loader"></div>
</div>
<div class="video-wrap">
  <video class="js-movie" src="assets/images/mov.mp4" muted preload="auto" playsinline></video>
</div>

JavaScript

window.addEventListener("load", function () {
  const movie = document.querySelector(".js-movie");
  const movieWrap = document.querySelector(".video-wrap");
  const loading = document.querySelector(".loading");
  // 再生時間を初期値に戻すか判定するフラグ
  let endflag = true;
  // 自動再生されている動画を再生する(スクロールで動画がカクつかないようキャッシュさせる)
  movie.play();
  // 最後まで再生したら自動再生されている動画を停止 + スクロール演出実施
  movie.addEventListener("ended", function () {
    if (endflag === true) {
      movie.pause();
      //　再生位置を初期化
      movie.currentTime = 0;
      // 初回再生完了まで非表示にしている動画を表示
      loading.classList.add("is-hidden");
      // ローディングが消え始めたら動画エリアを表示
      loading.addEventListener("transitionstart", function () {
        movieWrap.classList.add("is-active");
        // 再生時間を初期値に戻すのは今回のみ
        endflag = false;
      });
    }

    //　ローディングが消え終わった時の挙動
    loading.addEventListener("transitionend", function () {
      // ローディング要素を削除
      loading.remove();
      // スクロールと連動して操作する動画の再生位置の進み具合を設定
      let movieStepRatop;
      if (mediaFlg == "pc") {
        movieStepRatop = 600;
      } else if (mediaFlg == "tablet" || mediaFlg == "sp") {
        movieStepRatop = 300;
      }
      window.addEventListener("scroll", function () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        movie.currentTime = scrollTop / movieStepRatop;
      });
    });
  });
});

scss

.video-wrap {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  width: 100%; //希望の動画大枠横幅
  height: 100vh; //希望の動画大枠縦幅
  opacity: 0;
  transition: 1s;
  &.is-active {
    opacity: 1;
    transition: 1s;
  }
  video {
    width: 100%; //希望の動画横幅
    height: 100%; //希望の動画縦幅
    object-fit: cover;
  }
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100%;
  z-index: 100;
  opacity: 1;
  transition: 1s;
  &.is-hidden {
    transition: 1s;
    opacity: 0;
  }
  .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    animation: rotate 1s linear infinite;
    transform-origin: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-right: 2px solid #333;
    border-left: 1px solid #333;
    border-bottom: 2px solid #333;
  }
}

@keyframes rotate {
  0% {
    transform: translateY(-50%) translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) translateX(-50%) rotate(360deg);
  }
}