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>

Answer 2

我认为有10张图片，当滚动按下图像开关时 -

您可以尝试使用以下内容： https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html

Answer 3

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

如何使用滚动同步视频搜索？

3 个答案: