javascript - 我怎样才能让这个视频流畅地滚动？

Question

该视频具有较高的关键帧间隔（设置为 1），因此搜索不是问题。它在我的本地主机上平滑滚动，但在生产中落后。这是一个演示。任何帮助将不胜感激，因为我已经坚持了一段时间。

我的目标是让视频流畅滚动，没有延迟。我正在使用获取请求，以便我可以先下载整个视频以帮助提高流畅度，但它似乎不起作用。这是我的代码：

$(document).ready(function () {

  var vid = $('#v0');
  var url = "videos/video.mp4";
  var intro = $("#intro");
  var spinner = $(".spinner-border").closest("div");
  var checkOnce = false;
  var videoLength = $('.heading').length * 2;

  vid.hide();
  spinner.hide();

  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "arraybuffer";

  xhr.onload = function (oEvent) {
    var blob = new Blob([oEvent.target.response], { type: "video/mp4" });
    vid.src = URL.createObjectURL(blob);

    vid[0].play();

    // required to remove the fixed height
    intro.css('marginBottom', vid.height());

    // refresh video frames on interval for smoother playback
    setInterval(function () {
      vid[0].pause();
      vid[0].currentTime = (window.pageYOffset / (intro.height() / videoLength));

      // change video position to fixed or relative when scrolling past container
      if ($(window).scrollTop() >= intro.offset().top + intro.outerHeight() - window.innerHeight + vid.height()) {
        if (checkOnce == false) {
          vid.css('position', 'relative');
          intro.css('marginBottom', 0);
          checkOnce = true;
        }
      } else {
        if (checkOnce == true) {
          intro.css('marginBottom', vid.height());
          vid.css('position', 'fixed');
          checkOnce = false;
        }
      }
    }, 40);
  };

  xhr.onprogress = function (oEvent) {
    if (oEvent.lengthComputable) {
      var progress = oEvent.loaded / oEvent.total;
      if (progress < 1) {
        spinner.show();
        vid.fadeOut();
      } else {
        spinner.hide();
        vid.fadeIn();
      }
    }
  }

  xhr.send();
});

标签： javascriptjqueryvideoscroll