How do I control a video from Scroll?

1

I would like to know how I can control a video by scrolling using Javascript or some other technique.

Thankful

Ex: Scrolling controls for HTML5 video

link

    
asked by anonymous 14.07.2014 / 22:53

1 answer

1

I leave here an explanation of what is happening in the codePen you indicated.

// selecionar o elemento do video
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // variante com jQuery

// pausar o video ao inicio
vid.pause();

// pausar o video ao detectar um scroll (para impedir auto-play)
window.onscroll = function(){
    vid.pause();
};

// procurar, a cada 40 milisegundos, o scroll atual da página e mostrar a frame com esse numero/400
setInterval(function(){
    vid.currentTime = window.pageYOffset/400;
}, 40);

If you want to change the code a bit, take a look at this variant:

Demo: link

var vid = document.getElementById('v0');
vid.pause();
window.onscroll = function () {
    vid.currentTime = window.pageYOffset / 400;
    vid.pause();
};

document.getElementById('play').onclick = function () {
    vid.play();
}
document.getElementById('pause').onclick = function () {
    vid.pause();
    window.scrollTo(0, vid.currentTime * 400); // para colocar o scroll no sitio quando faz pause
}

Here I put the part that was setInterval inside the scroll and added a play and pause button to illustrate how you can control the video.

    
14.07.2014 / 23:23