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.
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
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'); }
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(); } }
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').
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.
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.
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!
pausing an HTML5 video element you do with
I can't get it to resume though, it always restarts from the beginning on play when you issue
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
now i just need to figure out where to drop in the pause code without breaking what's already there.
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
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)
im going to have to tinker with this.
thanks for the help bungle, its appreciated!
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?
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.
thank you so much for your help bungle :)