javascript - 滚动滚动视频(apple.com esque)——非常卡顿

Question

尝试实现 Apple 最近在 MacBook、iPhone 和最近使用的类似功能 MacBook Pro product page .

如果您查看 MBP 产品页面，您会注意到滚动时屏幕和 Touch Bar 是动画的。那实际上是一个视频。

我在采用这个时遇到了麻烦，因为视频似乎很卡顿。在我的例子中，有 4 个视频，如果我将它减少到 1 个视频，效果会更好，但仍然不是 100%。

我很好奇可以在这里应用什么方法/策略来使其更好地流动。

将视频文件作为 blob 会更好吗？最好将视频转换为一系列图像来代替它？

Demo .

这里有问题的代码:

// select video element
var vid0 = document.getElementById('v0');
var vid1 = document.getElementById('v1');
var vid2 = document.getElementById('v2');
var vid3 = document.getElementById('v3');
var windowheight = $(window).height()-20;

var scrollpos = window.pageYOffset/400;
var targetscrollpos = scrollpos;
var accel = 0;

// ---- Values you can tweak: ----
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.

// pause video on load
vid0.pause();
vid1.pause();
vid2.pause();
vid3.pause();

window.onscroll = function(){
  targetscrollpos = window.pageYOffset/400;
};


setInterval(function(){   
  scrollpos += (targetscrollpos - scrollpos)*accelamount;

  //update video playback
  vid0.currentTime = scrollpos;
  vid0.pause();

  vid1.currentTime = scrollpos;
  vid1.pause();

  vid2.currentTime = scrollpos;
  vid2.pause();

  vid3.currentTime = scrollpos;
  vid3.pause();

}, 40);

Answer 1

MP4/H.264 不是最好的删除格式 - 它主要设计用于流式正向线性播放。 Apple 页面确实使用了一些 MP4 视频，但仅用于在查看时触发线性播放，而不是用于删除。

您可以尝试其他支持的视频格式(例如 OGV、webm)，并通过 <sources>...</sources> 中的订单将这些格式作为第一选项提供。为您的视频设置部分以查看它们是否更好地支持随机播放 - 请注意浏览器的缓存策略在任何情况下都会影响延迟和加载。您可以使用 Media Source Extensions API 在更底层更好地控制缓存.

它还可以帮助控制视频，使用其在客户端窗口内的可见部分来触发暂停或播放。 This answer可以帮助您入门，并且有一个名为 Intersection Observer API 的即将推出的新 API对于这样的事情(存在 poly-fill)。

转换为 sprite-sheets 和/或 JPEG stills 是一个可行的选择(索尼至少在他们的一个网络演示中使用滚动来擦洗)。您当然需要更多地关注加载策略(想想预加载/缓冲)，这样您就可以尽快显示一些内容，而不是等待所有帧都加载完毕。