html - 如何将视频搜索与滚动同步？

Question

我需要一个与滚动同步的视频。请查看以下链接，其中 iMac pro(这是一个 mp4 文件)与滚动条同步。

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

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

Answer 1

例如，您可以使用 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>