How to scroll video please?

1

Hello,

I am trying to make scroll video page by using the following javascript:

    var frameNumber = 0, // start video at frame 0
    // lower numbers = faster playback
    playbackConst = 500, 
    // get page height from video duration
    setHeight = document.getElementById("set-height"), 
    // select video element         
    vid = document.getElementById('v0'); 
    // var vid = $('#v0')[0]; // jquery option

// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
  setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});


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

window.requestAnimationFrame(scrollPlay);

the Javascript works, and here is the document:

scroll video.hype.zip (890.2 KB)

But how to make it at fixe position ?

Great appreciated upon this issue.

Alex

2

I revised the javascript and update the hype document, it works both for PC and mobile layout, but there are some error at frontend only in mobile layout:

what does this error means please, anyway to fix these errors?

scroll video.hype.zip (891.3 KB)

3

If you dive into the error, you’ll see it has to do with the playback controls (“airplay-placard”) and is in Apple’s code, likely related to the responsive design mode. I think these can be ignored and wouldn’t happen in production environments.

4

Hi Jonathan,

Thanks, I upload it to server, unfortunately, the same errors show up:

please check the error at https://www.lovcour.com/scroll-video

If would be great if I can have your professional instructions, thanks.

Alex

5

This is because you are in responsive design mode, which is not what I would ever consider a “production environment.” Apple is doing a lot of work to fake the size and other aspects of a device.

The error is harmless; and I doubt it exists on actual devices. It is not a bug in your code or in Hype. It is an Apple bug just complaining about video control icons. You can ignore it.

7

Thank, unfortunately, in production environment, it does not work on iPhone.

On mobile layout, the video will does not show up if the video is set with uncheck Control, and it will show up with control, but not play with scroll unless push play button.

Actually, I already private message with two guys with payment, but they are not confident to do this:)

Thanks anyway.

Alex

8

restrictions … you may need a fallback: picture or gif or image sequence. or a clever workaround :wink: so catch an early touch to just init your videos may work.
but the safest -> fallback!