如何将视频搜索与滚动同步？答案

【问题标题】：How to sync video seek with scroll?如何将视频搜索与滚动同步？
【发布时间】：2018-04-02 22:17:21
【问题描述】：

我需要一个视频来与滚动同步。请参阅以下链接，其中 iMac pro（这是一个 mp4 文件）与滚动同步。

https://www.apple.com/in/imac-pro/

编辑：这可以在 Mac 上的 Safari 上看到。

【问题讨论】：

标签： html css video scroll safari

【解决方案1】：

我认为有 10 张图像，当滚动按下图像切换时-

你可以尝试使用这样的东西： https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html

【讨论】：

如果您检查该元素，它会说它是一个 mp4。浏览网址也可以播放。
不是mp4，可能只是标题，images.apple.com/v/imac-pro/a/images/overview/…
糟糕！为了消除混淆，我在 Mac 上的 Safari 浏览器上打开了上面提到的苹果网址（它作为 mp4 加载）。我在 Windows chrome 浏览器上检查了相同的内容。呈现在图像中。

【解决方案2】：

例如，您可以使用skrollr 库获取滚动值，并使用video.currentTime 属性为您的视频制作动画。
以下示例转载自here。

    skrollr.init({
    smoothScrolling: false,
    forceHeight    : false
});

// Seek video

// Cross browser animation
// https://gist.github.com/Warry/4254579#beware-of-reflows
var animFrame = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    // IE Fallback, you can even fallback to onscroll
    function (callback) { window.setTimeout(callback, 1000 / 60) };

function seek()
{
    $('video[data-time]').each(function ()
    {
        var $video   = $(this),
            ratio    = parseFloat($video.attr('data-time')).toFixed(2), // Uses Skrollr to get scroll ratio
            duration = $video[ 0 ].duration; // Total video time

        // Seek through video (if video seems loaded)
        if (duration) $video[ 0 ].currentTime = duration * ratio;
    });

    // Repeat
    animFrame(seek);
}

$('video[data-time]').on('loadedmetadata', function (e)
{
    // Launch first animation
    animFrame(seek);
});

body {
  height: 3000px;
  position: relative;
  background-color: #eee;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%,-50%);
  max-width: 90%;
  max-height: 80%;
}

h1 {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}

.ending {
  position: absolute;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>

<h1 class="begin">Please scroll...</h1>

<video preload data-start="@data-time: 0" data-end="@data-time: 1">
  	<source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm">
	<source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv">
	<source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4">
</video>

<h1 class="ending">The end.</h1>

【讨论】：

【解决方案3】：

上面 sasensis 答案的问题是它在手机上的表现非常糟糕，而且看起来一点也不流畅。一个简单的调整来检查视频的就绪状态将提高性能，但它仍然不是很流畅。这是我的笔。 https://codepen.io/marcchehab/pen/MWKZbNO