CODEWITHSUNDEEP
javascript
user3097640
user3097640

Reputation: 1

how to play a video file when scrolled into view

So Im trying to activate videos when they scroll into the viewport and just calling their different IDs but its not working, admittedly I am very new to this (js/jquery) and am not 100% about whats going on so any help would be great.

Just to be clear Im trying to get each video to play separately whenever they are scrolled into view, I have the 1st video working but none of the other subsequent videos play when scrolled over.

I created this to help with seeing what Im trying to accomplish http://jsfiddle.net/8TpN5/

Update: Ok so this is how I want it to work http://jsfiddle.net/8TpN5/1/ but how could I get it to work and not repeat the code? 

var videoId = document.getElementById("video","videoTwo");
var playVideo = videoId,
fraction = 0.9;

function checkScroll() {
var x = playVideo.offsetLeft,
    y = playVideo.offsetTop,
    w = playVideo.offsetWidth,
    h = playVideo.offsetHeight,
    r = x + w, //right
    b = y + h, //bottom
    visibleX,
    visibleY,
    visible;

if (window.pageXOffset >= r || window.pageYOffset >= b || window.pageXOffset + window.innerWidth < x || window.pageYOffset + window.innerHeight < y) {
    return;
}

visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

visible = visibleX * visibleY / (w * h);

if (visible > fraction) {
    playVideo.play();
} else {
    playVideo.pause();
}
}

checkScroll();
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

Upvotes: 0

Views: 465

Answers (2)

RXMESH
RXMESH

Reputation: 286

just change the getElementById to getElementsByTagName.

Hope this helps:

http://jsfiddle.net/jAsDJ/

var videos = document.getElementsByTagName("video"),
fraction = 0.8;
function checkScroll() {

    for(var i = 0; i < videos.length; i++) {

        var video = videos[i];

        var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
            b = y + h, //bottom
            visibleX, visibleY, visible;

            visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
            visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

            visible = visibleX * visibleY / (w * h);

            if (visible > fraction) {
                video.play();
            } else {
                video.pause();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

Upvotes: 0

Diego
Diego

Reputation: 4433

This line:

var videoId = document.getElementById("video","videoTwo");

Should be:

var videoOne = document.getElementById("video"), 
    videoTwo = document.getElementById("videoTwo");

getElementById only takes one id as parameter and returns one object.

Upvotes: 1

Related Questions