包含html5视频的慢页面

问题描述

每张幻灯片都有一个背景视频。 问题是该页面不能很好地运行，在较旧的PC和Mac上速度有点慢，我想对其进行优化。

我的意思不是您加载页面时 *，而是页面本身的操作，滚动时似乎所有视频都已激活，这导致页面变为在较旧的PC和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);
      }
  });

});

解决方法

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

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

还为服务器使用Cache-Control标头

Watch this有关如何操作。 我想你会解决的。 谢谢

[更新] 您也可以链接托管在Google服务器中的js文件。

,

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

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

某些设备甚至无法一次解码一个以上的视频，而同时解码，缩放，回放，合成和处理一些基于JavaScript的平滑滚动则更少。即使在我强大的笔记本电脑上，您的网站一次也只能播放一个视频。

至少，您要暂停当前不在屏幕上的所有视频。尝试一次只玩一件事。