Skip to main content
Commonmark migration
Fonte Link

Deixo aqui uma explicação do que está a acontecer no codePen que indicou.

// 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);

Se quiser mudar um pouco o código dê uma olhada a esta variante: ##Demo: http://jsfiddle.net/n3Lm6/

Demo: http://jsfiddle.net/n3Lm6/

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
}

Aqui juntei dentro do scroll a parte que estava com o setInterval e juntei um botão play e pause para exemplificar como pode controlar o video.

Deixo aqui uma explicação do que está a acontecer no codePen que indicou.

// 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);

Se quiser mudar um pouco o código dê uma olhada a esta variante: ##Demo: http://jsfiddle.net/n3Lm6/

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
}

Aqui juntei dentro do scroll a parte que estava com o setInterval e juntei um botão play e pause para exemplificar como pode controlar o video.

Deixo aqui uma explicação do que está a acontecer no codePen que indicou.

// 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);

Se quiser mudar um pouco o código dê uma olhada a esta variante:

Demo: http://jsfiddle.net/n3Lm6/

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
}

Aqui juntei dentro do scroll a parte que estava com o setInterval e juntei um botão play e pause para exemplificar como pode controlar o video.

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Deixo aqui uma explicação do que está a acontecer no codePen que indicou.

// 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);

Se quiser mudar um pouco o código dê uma olhada a esta variante: ##Demo: http://jsfiddle.net/n3Lm6/

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
}

Aqui juntei dentro do scroll a parte que estava com o setInterval e juntei um botão play e pause para exemplificar como pode controlar o video.