CODEWITHSUNDEEP
htmlcssvideoscrollsafari
Afz
Afz

Reputation: 77

How to sync video seek with scroll?

I need a video to sync with the scroll. Please see the following link where the iMac pro (which is an mp4 file) syncs with the scroll.

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

Edit: This can be seen on Safari on a Mac.

Upvotes: 0

Views: 2823

Answers (3)

Marc Chéhab
Marc Chéhab

Reputation: 151

The problem with sasensis answer above is that it's performing very badly on mobile phones and doesn't look smooth at all. A simple tweak to check the video's readystate will improve performance, but it's still not very smooth. Here's my pen. https://codepen.io/marcchehab/pen/MWKZbNO

The relevant addition is:

if (myVideo.readyState >= 3) {
  myVideo.currentTime = scrollVideo.a;
}

Upvotes: 0

sasensi
sasensi

Reputation: 4650

You can, for example, use skrollr library to get the scroll value, and use video.currentTime property to animate your video.
The following example is reproduced from 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>

Upvotes: 1

Nofar Eliasi
Nofar Eliasi

Reputation: 109

i think there are 10 images and when the scroll pressed the images switches-

you can try to use something like this: https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html

Upvotes: 0

Related Questions