Question

尝试实现Apple最近用于MacBook，iPhone和最近MacBook Pro product page的类似功能。

如果您查看MBP产品页面，您会注意到滚动时屏幕和触控栏正在动画。这实际上是一段视频。

由于视频看起来很麻烦，我很难接受这个。在我的情况下有4个视频，如果我将其剪切为1个视频，它会更好地工作，但仍然不是100％。

我很好奇这里可以采用哪些方法/策略来使其更好地流动。

将视频文件视为blob会让它变得更好吗？最好将视频转换为系列图像吗？

此处有问题的代码：

// 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）。

转换为精灵表和/或JPEG静止图像是一个可行的选择（索尼在至少一个使用滚动浏览的网络演示文稿中做到了这一点）。您当然需要更多地关注加载策略（想想预加载/缓冲），这样您就可以尽快显示某些内容，而不是等待加载所有帧。

滚动视频滚动（apple.com esque） - 结果非常严重

1 个答案: