Skip to content Skip to sidebar Skip to footer

Set An Html5 Video To Pause When Video Player Is Out Of View

I'd like to do this with javascript. I'm building a presentation using Hakim El Hattab's Reveal.js as a foundation. The way Reveal.js works is the current slide you are viewing has

Solution 1:

Now that you posted your code, it makes it easier to fix:

if( i < index ) {
    // Any element previous to index is given the 'past' class
    slide.setAttribute('class', 'past');
    var vids = document.getElementsByClassName("past");
    for (var i = 0; i < vids.length; i++) {
        vids[i].pause();
    }
}
elseif( i > index ) {
    // Any element subsequent to index is given the 'future' class
    slide.setAttribute('class', 'future');
    var vids = document.getElementsByClassName("future");
    for (var i = 0; i < vids.length; i++) {
        vids[i].pause();
    }
}

See if that helps. If it doesn't, are you using a modern and standards-compliant browser? getElementsByClassName() is a relatively new feature. It works in the latest version of Chrome for me.

Solution 2:

I don't know if setTimeout would work here but you could try the following:

functionPauseVids() {
    var vids = document.getElementsByClassName("past");
    var vids2 = document.getElementsByClassName("future");
    for (var i = 0; i < vids.length; i++) {
        vids[i].pause();
    }
    for (var i = 0; i < vids2.length; i++) {
        vids2[i].pause();
    }
}

// Within onLoad or $(document).ready()setTimeout("PauseVids()", 1000);

Tell me if that works.

Solution 3:

@petschekr :guess this won't work, because classname past future is not only set to videoelements?!

i have no idea how reveals work and what kind of player you are using! but my way would be sth like:

there is only one file with the present class, right (current Slide)

a) define sth like a onChange function (for example on every button which changes pages + keypresses)

b) trigger that function before you switch pages

functiononChange(){
       var currentSlice = document.getElementByClassName('present')  //get current html elemenvar videoObjects = currentSlice.getElementsByTag('video')  //get videoelements here html5 videofor each videoObj      
            videoObj.pause()

edit: pseudocode to get you an idea!

Post a Comment for "Set An Html5 Video To Pause When Video Player Is Out Of View"