Hi, I want to play and pause HTML5 videos based on their visibility with ScrollReveal. Kind of like how Twitter and Facebook does it for GIFs (only autoplay and loop the video when visible).
I got it mostly working but only for the first video. I think this is because I am using document.getElementById and id's should be unique in valid HTML. But I can't get it to work at all with document.getElementsByClassName (no video starts playing instead of only the first).
How can I target only the revealed element with my function?
var vid = document.getElementById("shots");
function playVid(el) {vid.play();}
function pauseVid(el) {vid.pause();}
ScrollReveal().reveal('video', {
beforeReveal: playVid ,
beforeReset: pauseVid,
reset: true
});
Hi, I want to play and pause HTML5 videos based on their visibility with ScrollReveal. Kind of like how Twitter and Facebook does it for GIFs (only autoplay and loop the video when visible).
I got it mostly working but only for the first video. I think this is because I am using
document.getElementById
and id's should be unique in valid HTML. But I can't get it to work at all withdocument.getElementsByClassName
(no video starts playing instead of only the first).I created a CodePen to demonstrate my issue.
How can I target only the revealed element with my function?
Environment