滚动滚动视频（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 视频，但仅用于在查看时触发线性播放，而不用于擦除。

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

在更底层更好地控制缓存

它还可以帮助控制视频，使用其在客户端中的可见部分 window 来触发暂停或播放。 This answer can get you started, and there is a new upcoming API called Intersection Observer API for things like this (a poly-fill存在）。

转换为 sprite-sheets and/or JPEG 剧照是一个可行的选择（索尼至少在他们的一个网络演示中使用滚动来擦洗）。您当然需要更多地关注加载策略（想想 preload/buffering），这样您就有东西可以尽快显示，而不是等待所有帧都加载完毕。

滚动滚动视频（apple.com esque）——非常卡顿

Scrub video on scroll (apple.com esque) – stutters tremendously

javascript

video

scroll

html5-video