Controlling video playback - a little guidance please

['L']

Canvas, blobs and bears oh my!! Ok maybe not bears, but sprites didn't fit with the Wizard of Oz theme I was going for 🙂

 

I have a 13s video that I want to play when the page loads. After it's played, onScroll I want it to replay to 50%, then stop. Basically, the video is a head rotating 360 in 3d space, at 50% it faces right, which is where I want to place my 2nd lot of content. 

 

I've searched the forums and found loads of interesting stuff involving airpods, canvas, scrolling sprites, image sequences and even something to do with 'blobs' in videos. Most of it's beyond me, but I'm happy to delve in - I'm just not sure where to focus my search. 

 

Can anyone tell me if what I've described is possible and if so, what would be the best way to go about it? Video seems the likeliest and smoothest option, as only play/pause need to be controlled, plus 13s*30fps seems a bit unwieldy, but I could be wrong...

Any thoughts would be gratefully appreciated!!

 

[GreenSock]

You don't need to link it to the scroll position in the sense that the scrollbar would act as a scrubber for the video, right? You just want to play the video immediately and then if the user scrolls even 1px after that, it'd play again halfway and stop (regardless of how the user scrolls thereafter)? And when if the user scrolls immediately when they load the page? 

 

I mean it certainly seems doable to me. 

 

Good luck!

['L']

Hi Jack,

Thanks for responding! 

You're right, the scrollbar's not acting as a scrubber, it's just the trigger for the replay and to advance the content.

Re scrolling 'even 1px' and what to do if the user scrolls immediately - there's definitely some logic to be worked out! Ideally I want to play the full video on load and then scrub to the halfway point, while also scrubbing the 2nd content/timeline. This would let me address the logic (onLeave, onEnterBack, etc) and look good whichever direction is being scrolled. 

...I just spent the whole day replying to this and trawling the forums for umpteen different solutions that 'might' fit my purposes. Finally as the sun is about to set, I stumbled across this thread, which is actually an old answer from you Jack (thanks again)! No canvas, no blobs, just sprites... Thank goodness, because my head is spinning with everything I've read today!

 

I should be able to work with that, assuming 390 images isn't too heavy. Failing that, I might have to delve into canvas - what do you think? ['blobs' probably best left alone...although they are mentioned in this thread, which is also potentially useful]

 

Crazy thing is, I remember finding the original tutorial for this ages ago, wish I'd stumbled across this link sooner...doh! 🤦‍♀️

 

[GreenSock]

Glad you found a useful thread that provided some solid direction. Yeah, I'd recommend doing some tests and see what works best. 

 

Have fun!