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

[dfogge]

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!

[bungle]

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();

[dfogge]

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');

}

[bungle]

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();

}

}

[dfogge]

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!

[bungle]

what does the structure of your slide elements look like?

[dfogge]

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

VIDEO SLIDE

[dfogge]

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?

[bungle]

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.

[dfogge]

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 :)

[bungle]

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

[seanborja]

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

[Author]

Posts