Skip to content

Instantly share code, notes, and snippets.

@joeydi
Created September 25, 2014 13:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joeydi/7087fb720eeef1873a44 to your computer and use it in GitHub Desktop.
Save joeydi/7087fb720eeef1873a44 to your computer and use it in GitHub Desktop.
Attempt to play video frame by frame with scroll. Don't try this at home, kids.
videos.each(function () {
var video = $(this).get(0);
video.addEventListener('loadedmetadata', function () {
console.log(video.duration);
});
});
skrollr.init({
render: function(data) {
// console.log(data);
videos.each(function () {
var video = $(this),
video_node = video.get(0),
video_top = video.offset().top,
video_height = video.height(),
percent_visible,
time;
if (data.curTop >= video_top - $(window).height() - 200) {
percent_visible = (data.curTop - video_top + $(window).height() - 200) / (video_height - 200);
if ( percent_visible > 1 ) {
return true;
}
time = video_node.duration * percent_visible;
console.log(time);
if (!isNaN(time)) {
console.log('playing');
video_node.currentTime = time;
}
}
});
}
});
@fabianmarz
Copy link

Hey, nice script!
But If i try to implement this, my video is going crazy...Can u link an example page to review the code of how to implement this correctly? :)

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment