css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A quick demo on how to control an HTML 5 video by scrolling.

  • Won't work on mobile

Comments

  1. Excellent demo, really useful and simple technique, thank you. If we have the video in a section further down the page and don't want the video to start being controlled with the scroll before that sections hits the top of page, just set an " if y>" argument?

  2. Pretty rad. Simple and efficient. Loved it!

  3. Cool stuff - small question though: Where's the number 400 from? Is it the total length in seconds of the movie?

  4. Huh! Never would have thought of that. Cool

  5. Very cool! This might be a fun little feature -- dynamically set the height depending on video length:

    var setHeight = document.getElementById("set-height");
    vid.addEventListener('loadedmetadata', function() {
      setHeight.style.height = Math.floor(vid.duration) * 400 + "px";
    });
    
  6. @cupofjoakim, the number 400 is a constant that controls the number of frames skipped per pixel scrolled.

    The higher the number the slower the video will play back when you scroll.

  7. Thanks for the awesome demo! - one JavaScript improvement.

    Consider setting vid.currentTime inside of the window.onscroll event instead the setInterval.

    This way, vid.currentTime can update as the user scrolls, but without having to rely on a "polling" function.

    Example:

    window.onscroll = function(){
        vid.currentTime = window.pageYOffset/400;
    };
    

    Then you can remove the setInterval

    Hope this help!

  8. Cool demo. Question, how did you save this video out? did you use the Serato handbrake plugin? Mine video is being pretty choppy.

  9. Loving this but any ideas why it doesn't work on an iPad? The video doesn't seem to appear?

    Thanks

  10. This didn't work for me when adding my own video. Any reason you can think of? It seems I get an inconsistent response from loadedmetadata with my video but not with your's. I was curious if the keyframe settings in the codec might have anything to do with it.

  11. hi... possible to have this scroll horizontally and also display some html elements e.g. hotspots at certain frames of the video? thanks

  12. @jordansykes to prevent the video from playing until it hits a specific point on your page, figure out the # of pixels from the top that you want your video to begin.

    You can get this number by using this function, which will print the current scroll distance into your console:

    $(window).scroll(example); 
    function example() {
        var tempScrollTop = $(window).scrollTop();
        console.log("Scroll from Top: " + tempScrollTop.toString());
    };
    

    Then, once you have the 'tempScrollTop' number where you want your video to start playing (mine was 1980) you can wrap your window.requestAnimationFrame(scrollPlay); function in the example function above, like so:

    function example() {
            var tempScrollTop = $(window).scrollTop();
            console.log("Scroll from Top: " + tempScrollTop.toString());
            if(tempScrollTop> 1980){
                window.requestAnimationFrame(scrollPlay);
            }
        };
    

    You must also change your scrollPlay function to account for this delay in start time in the equation for frameNumber:

    // Use requestAnimationFrame for smooth playback
        function scrollPlay(){  
          var frameNumber  = (window.pageYOffset-1980)/playbackConst;
          vid.currentTime  = frameNumber;
          window.requestAnimationFrame(scrollPlay);
        }
    

    Ta-da!

  13. Hi! Great solution! I tried it with my own video and it scrolled fine with mouse wheel and on mobile, but it jumped using the trackpad. Your video works great though! So it . must be something wrong with my video... Which export settings and codec do you suggest? Thank you a lot!

  14. Hi @ollieRogers. Great demo. Are there characteristics of the video that make scroll more smoothly? My video has very similar bit rate, frame rate, length, and dimensions, but the scrolling is very jerky instead of silky smooth like yours. (I've tried my code with your video and it's very smooth.) Any ideas? Thanks!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...