包含 html5 个视频的缓慢页面

Question

每张幻灯片都有一个背景视频。问题是该页面不能很好地工作，它在旧电脑和 mac 上有点慢，我想优化它。

我不是说当你加载页面时*而是页面本身的操作，当你滚动时似乎所有的视频都被激活，这导致页面在旧电脑和 mac.

上变得很慢

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

知道如何优化它吗？

这是一个页面示例：http://z-testing.000webhostapp.com/_video/

html:

<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>

js:

/* 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);
      }
  });

});

Answer 1

Amm 我不认为它适用于 js 我不知道你的网速但我想这是你的视频问题您的视频正在重定向，因此您感觉网站运行缓慢。观看这个 ScreenShot

我想只需下载视频，然后使用任何在线或离线工具对其进行压缩即可。将它从 10mb 变为 1-2mb

也为您的服务器使用 Cache-Control Headers

Watch this 怎么办。我想你会解决的。谢谢

[更新] 您还可以 link 托管在 google 服务器中的那些 js 文件。

Answer 2

实际上，您只需要不这样做即可。

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

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

至少，您需要暂停所有当前 on-screen 以外的视频。尝试一次只玩一件事。

包含 html5 个视频的缓慢页面

Slow page with html5 videos

html

javascript

jquery

video.js