gostaria de saber como posso controlar um video pela scroll usando Javascript ou alguma outra técnica.
Grato
Ex: Scrolling controls for HTML5 video
gostaria de saber como posso controlar um video pela scroll usando Javascript ou alguma outra técnica.
Grato
Ex: Scrolling controls for HTML5 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:
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.
window.onscroll = function() {
myFunction()};
var video = document.getElementById('videotrailer');
function myFunction() {
if (document.body.scrollTop > 350) {
this.video.pause();
}
else{
this.video.play();
}
}