Grow your CSS skills. Land your dream job.

Set an HTML5 Video to PAUSE when video player is out of view

  • # February 21, 2012 at 1:26 pm

    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 a class of .present, previous slides have a class of .past, and slides to come have a class of .future. I would like it to automatically pause any video that is inside a slide set to .past or .future.

    How should I go about this?

    Thanks in advance!

    # February 21, 2012 at 3:11 pm

    I just finished doing something like this

    pausing an HTML5 video element you do with

    $('#video').get(0).pause();

    I can’t get it to resume though, it always restarts from the beginning on play when you issue

    $('#video').get(0).play();

    Either way you are going to need to add some code to Reveal.js to tell the video element to pause when it assigns the classes which is in function updateSlides(), depending on where you are placing your video element in the slide code, you will need to do something like

    slide.children(':first-child’).get(0).pause();
    # February 21, 2012 at 5:09 pm

    thanks for the help bungle. that’s definitely the right direction.

    now i just need to figure out where to drop in the pause code without breaking what’s already there.

    if( i < index ) {
    // Any element previous to index is given the 'past' class
    slide.setAttribute('class', 'past');
    }
    else if( i > index ) {
    // Any element subsequent to index is given the 'future' class
    slide.setAttribute('class', 'future');
    }
    # February 21, 2012 at 6:19 pm

    is it all video elements or do some of the other slides not have video?

    i have been using a condition to prevent the code firing when the video element doesn’t exist as otherwise it was causing hang ups.

    my condition looks like this


    if ($('#video').length > 0) {
    $('#video').get(0).pause();
    }

    so i would give all the video elements the class of “videoslide” and then i could foresee something like (bearing in mind that i have no idea how you are structuring the slide elements)


    if( i < index ) {
    // Any element previous to index is given the 'past' class and video is stopped
    slide.setAttribute('class', 'past');

    if (slide.children('.videoslide').length > 0) {
    slide.children('.videoslide').get(0).pause();
    }
    }
    else if( i > index ) {
    // Any element subsequent to index is given the 'future' class video is stopped
    slide.setAttribute('class', 'future');
    if (slide.children('.videoslide').length > 0) {
    slide.children('.videoslide').get(0).pause();
    }
    }

    # February 22, 2012 at 12:53 pm

    hmm thats causing the script to break, and slides are just stacking on top of each other.

    im going to have to tinker with this.

    thanks for the help bungle, its appreciated!

    # February 22, 2012 at 1:26 pm

    what does the structure of your slide elements look like?

    # February 22, 2012 at 1:35 pm

    oh sorry, i shouldve posted this when you first mentioned it.




    VIDEO SLIDE



    # February 22, 2012 at 4:16 pm

    thanks to your direction i was finally able to get this working:

    if( i < index ) {
    // Any element previous to index is given the 'past' class
    slide.setAttribute('class', 'past');
    document.getElementById('vid').pause();
    }
    else if( i > index ) {
    // Any element subsequent to index is given the 'future' class
    slide.setAttribute('class', 'future');
    document.getElementById('vid').pause();
    }

    although, at this point its limited to a single video due to getElementById. next i need to try working out how to apply it to something like getElementsByTagName(‘video’).

    any ideas?

    # February 22, 2012 at 6:35 pm

    Yeah, that’s why I was having you apply the video slide class, so that you can then target the video element using query with


    slide.children('.videoslide')

    I may have made the mistaken assumption that this was using jquery, if not then load jquery and target the video element by as a child of the slide element rather than by ID.

    # February 23, 2012 at 10:38 am

    yeah this isnt using jquery. i have a working solution right now by targeting ID’s and i’m just about out of time, so i think i’m just going to go with what i have for now.

    thank you so much for your help bungle :)

    # February 24, 2012 at 12:37 am

    You are very welcome, let me know if you decide to progress it further.

    # September 18, 2013 at 7:21 am

    I realize this thread is over one years old. I too am building a presentation with Reveal.js, that will mix slides with full frame videos. I too am wanting to control when the videos play. I have read through this thread and have a couple of follow up questions:

    1) Did your solution work? Can you progress through slide deck, then when landing on a slide with a video either autoplay it or prompt it via remote control?

    2) Would you be willing to accept a six-pack of beer to hand hold me for a moment to place applicable code, or give me a link to your presentation so I may dissect how you accomplished the solution discussed?

    I will be grateful for any help you may be able to offer.

    Sean

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".