Javascript 带有html5视频的慢速页面

每张幻灯片都有一个背景视频。 问题是页面运行不太好，在旧pc和mac上有点慢，我想优化它

我的意思不是当你加载页面*时，而是页面本身的操作，当你滚动时，似乎所有的视频都被激活了，这会导致页面在较旧的pc和mac上变得非常慢

我正在使用video.js作为背景视频

你知道如何优化它吗

以下是一个页面示例：

html:

---

嗯，我不认为这是给js的 我不知道你上网的速度 但我想这是你的视频问题 你的视频正在重定向，因此你感觉网站速度很慢。 看这个

我想只要下载视频，然后用任何在线或离线工具进行压缩。 将其从10mb转为1-2mb

还可以为服务器使用缓存控制头

关于如何做。 我想你的问题会解决的。 多谢各位

[更新]

---

您还可以链接那些托管在google server中的js文件。

实际上，您不需要这样做

找到一种更好的方式来呈现您想要的内容，而不必在后台播放大量高清视频。不管怎样，对于那些不打算播放你的视频的人（可能是在带宽受限的网络上），你都需要后备内容

有些设备甚至不能一次解码多个视频，更不用说同时解码、缩放、播放、合成和处理一些基于JavaScript的平滑滚动了。即使在我结实的笔记本电脑上，你的网站也只能为我播放一段视频

---

至少，您需要暂停屏幕上当前未显示的任何视频。试着一次只播放一个视频。

是的，我认为开始时最好一次只复制一个视频，我想我的代码正在这样做，你能帮我吗？

<div class="swiper-container swiper-container-home">
  <div class="swiper-wrapper">
    <article class="swiper-slide">
      <div class="swiper-slide-content swiper-slide-content-intro">
        <h2>And you can clean around the wound <br>
        If you want to, It just takes time</h2>
      </div>
      <div class="fullscreen-video">
        <a href="javascript:void(0)" class="icon-close icon-close-video"></a>
      </div>
      <!-- the autoplay is only for the first video -->
      <video id="my-player" class="video-js vjs-default-skin" autoplay loop muted playsinline> 
        <source type="video/mp4" src="https://player.vimeo.com/external/422535408.hd.mp4?s=15cc550deb01f3addbfd31fbfd0a63ee665800d8&profile_id=174">
      </video>
      <div class="scrolldown fakt-light text small"></div>
    </article>
  </div>
</div>

/* home page */
$(window).load(function() {

  var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    slidesPerView: 1,
    spaceBetween: -1,
    mousewheel: true,
    preventClicks: true,
    allowTouchMove: true,
    preventClicksPropagation: true
  });

  swiper.on('slideChange', function() {
    var realIndex = swiper.realIndex;
    if (realIndex == 0) {
      $("#header").removeClass("active");
    } else {
      $("#header").addClass("active");
    }
  });

  // next slide
  $(".scrolldown").on("click", function (e) {
      e.preventDefault();
      swiper.slideNext();
      return !1;
  });

  $(".swiper-slide, .swiper-container").height($(window).height());
  $(window).resize(function () {
      $(".swiper-slide, .swiper-container").height($(window).height());
  });

  function toggleMute() {
      $(".swiper-slide-active .play_video").on("click", function (e) {
          var video = $(".swiper-slide-active video").attr("id");
          var play = videojs(video);
          console.log(video);
          e.preventDefault();
          $(".content").removeClass("delay");
          $("body").addClass("music_on");
          play.currentTime(0);
          play.play();
          play.muted(!1);
          play.on("ended", function () {
              $("body").removeClass("music_on");
              play.muted(!0);
              setTimeout(function () {
                  $(".content").addClass("delay");
              }, 1000);
          });
          return !1;
      });
      $(".swiper-slide-active .cross_video").on("click", function (e) {
          var video = $(".swiper-slide-active video").attr("id");
          var player = videojs(video);
          player.muted(!0);
          $("body").removeClass("music_on");
          setTimeout(function () {
              $(".content").addClass("delay");
          }, 1000);
      });
      $(".swiper-slide-active")
          .not(".play_video")
          .on("click", function () {
              var video = $(".swiper-slide-active video").attr("id");
              var player = videojs(video);
              player.muted(!0);
              $("body").removeClass("music_on");
              setTimeout(function () {
                  $(".content").addClass("delay");
              }, 1000);
          });
      $(document).keyup(function (e) {
          if (e.keyCode == 27) {
              var video = $(".swiper-slide-active video").attr("id");
              var player = videojs(video);
              player.muted(!0);
              $("body").removeClass("music_on");
              setTimeout(function () {
                  $(".content").addClass("delay");
              }, 1000);
          }
      });
  }
  if ($(".swiper-slide-active video").length) {
      var video = $(".swiper-slide-active video").attr("id");
      var player = videojs(video);
      player.play();
      player.muted(!0);
      toggleMute();
  }
  swiper.on("slideChangeTransitionStart", function () {
      $("body").removeClass("music_on");
      if ($(".swiper-slide-active video").length) {
          var video = $(".swiper-slide-active video").attr("id");
          var player = videojs(video);
          player.play();
          player.muted(!0);
          toggleMute();
      }
  });
  swiper.on("slideChangeTransitionEnd", function () {
      if ($(".swiper-slide-prev video").length) {
          var video = $(".swiper-slide-prev video").attr("id");
          var player = videojs(video);
          player.play();
          player.muted(!0);
      }
      if ($(".swiper-slide-next video").length) {
          var video = $(".swiper-slide-next video").attr("id");
          var player = videojs(video);
          player.play();
          player.muted(!0);
      }
  });

});