'Javascript Scrollmagic scroll Videoplayback. Get video duration an use it for scrollduration
Hello i tried various ways but it is not working for me.
I am scrolling a video with the scrollwheel and that is working fine. But if i change the videofile i have to find the scrollduration by trial and error.
I would like to make this happen automaticaly.
I would like to be able to change the scrollspeed to according to the scrollduration.
Thanks in advance!
const action = document.querySelector(".action");
const video = action.querySelector("video");
const videoheight = 3840; // 3840px UHD and if FullHd 1920px -> screen is in vertical position
//Check duration of video
video.onloadedmetadata = function() {
var videoduration = video.duration;
console.log("videoduration is " + videoduration);
}
// How do i calculate the scrollmagic duration?
// I tried videohight*30fps*videoduration but it is not working
//Scroll Magic scenes
const controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
duration: 500000, //64000
triggerElement: action,
triggerHook: 0
})
// .addIndicators()
.setPin(action)
.addTo(controller);
//Scroll Magic video animation
let accelAmount = 0.1;
let scrollpos = 0;
let currentTime = video.currentTime;
let lastcurrentTime;
let delay = 0;
scene.on("update", e => {
scrollpos = e.scrollPos / 20000; //the higher the number, the slower
});
//Move
setInterval(() => {
delay += (scrollpos - delay) * accelAmount;
video.currentTime = delay;
console.log(video.currentTime + " reading");
lastcurrentTime = video.currentTime;
}, 33.3);
//function to check if is still scrolling
function scrollTracker(delay, callback) {
let timeout = null;
return function(...args) {
if (timeout !== null) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(callback, delay, ...args)
};
}
//check if is still scrolling after x seconds
const tracker = scrollTracker(10000, () => {
console.log('User stopped scrolling.');
window.scrollTo(0, 0);
});
window.addEventListener('scroll', tracker);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
