Progress in video on scoll

,
1

Dear forum,

As you can see from the link below someone managed to make the function “progress on scroll” on a video clip both backwards and forwards. Is that possible in Hype ?

Best regards
Lasse

2

Should be doable – just play around a bit:

3

Wow - cool…thanks. How did you do it ?

Best regards
Lasse

4

Hey,

this is just a quick google search for your topic on codepen. I have not tested this in Hype, but it should be convertabel (you will need also JQuery)… Not sure if the metadata is exposed in hype??? but the rest SHOULD be doable…

5

Okay - thanks alot :slight_smile:

6

@sandor @laka74,

Amazing…

I test that Javascript, but it does not work In Hype script editor, would you like to share how to make it work in Hype?

Thanks.

7

Should get you going!

progressVideoOnScroll.hype.zip (12.2 KB)

1 Like
8

Great...

I creative this one yesterday:

There is a problem for me to access these videos in your sample:

Although I am using lantern VPN:

AcAWVLXjToCws3AlNYLi7Q.png796×1089 185 KB

but I believe your sample is great and professional one, For test purpose, I tried to use your javascript and add a local video in your sample, and make the scene as responsive layout with 2000px height.

My one sample works for local video but I can not make it fixed at a position, but your one does work for local video, would you like to have a check or try please?

Thanks

progressVideoOnScrollbyalex.hype.zip (891.1 KB)

9

Hi @DBear,

I understand:
// get page height from video duration
setHeight1 = document.querySelectorAll(".HYPE_scene")[0];
setHeight2 = document.querySelector("#" + hypeDocument.documentId());

but, I mean, anyway to set the video in a flexible layout? and also allow set the scene with a long height?

Thanks

10

Finally, I creative this one, it works well in Safari, but not work in Firefox and mobile mode, any suggestions please?

I do not know why I can not upload zip file, but you can access it at https://www.lovcour.com/videoscrolltestcopy

Thanks