CODEWITHSUNDEEP
javascriptvideoreveal.jsspacebars
duke390
duke390

Reputation: 21

use spacebar to play/pause video in reveal.js

I’m using reveal.js for a presentation of some short video clips (1 clip per slide). The default settings of reveal.js presentation allow to navigate between the slides using the left/right arrow keys. I’d like to use the spacebar (key=32) to play/pause the video and thus I am trying to change/override the default keyboard bindings in reveal.js. https://github.com/hakimel/reveal.js/ suggests the following: 

Reveal.configure({
  keyboard: {
    32: function() {}
  }
});

I tried to insert several codes/functions, but when I try to run the code on a browser, either I get a black screen or nothing at all happens.

var video = document.getElementById('video');
var $video = $('video');

$(window).keydown(function(e) {
  if (e.keyCode === 32) {
    if (video.paused == true)
            video.play();
        else
            video.pause();
  }
});

As you can see, I am an absolute beginner in JS/reveal.js and I would very much appreciate your help. Thanks!

Upvotes: 2

Views: 2573

Answers (3)

Johnny Cee
Johnny Cee

Reputation: 434

I know I am responding to an old post. I found this thread when trying to find something that would work for me, and it lead to the solution I implemented.

The other solutions only seemed to work for one video, and (when combined with other suggestions I found) there were some other issues such as spacebar playing the video after leaving the slide.

I used this configuration:

Reveal.initialize({
  keyboard: {
    13: 'next',
    32: () => {
      var currentSlide = Reveal.getCurrentSlide();
      var currentVideo = currentSlide.getElementsByTagName("video")[0];
      if (currentVideo) {
        if (currentVideo.paused == true) currentVideo.play();
        else currentVideo.pause();
      }
      else {
        Reveal.next();
      }
    }
  }
});

Using the configuration above, spacebar will only play/pause a video when there is a video on the current slide. Otherwise, spacebar advances to the next slide.

Some other solutions worked in Chrome but not Firefox due to differences in the way they handle the video element, but this approach worked

Upvotes: 0

duke390
duke390

Reputation: 21

Thanks! but with this code I only get a black screen. However, it works as follows for the first clip: 

Reveal.configure({
keyboard: {
13: 'next', // go to the next slide when the ENTER key is pressed
27: function() {}, // do something custom when ESC is pressed
32: function vidplay(){ 
      var video = document.getElementById("video");
      if (video.paused == true) video.play();
      else video.pause();
      }
 }

});

Do you know how I can make this work for the other clips/slides? The video-id is "video" for every clip on every slide: 

<video width="1200" height="600" ``controls id="video">
<source src="F06.mp4" type="video/mp4" >
</video>

Upvotes: 0

&#214;zg&#252;r Ersil
&#214;zg&#252;r Ersil

Reputation: 7013

that will fix your problem:

Reveal.initialize({
    // Enable keyboard shortcuts for navigation
    keyboard: true,
}

and for the custom keyboard events:

Reveal.configure({
  keyboard: {
    13: 'next', // go to the next slide when the ENTER key is pressed
    27: function() {}, // do something custom when ESC is pressed
    32: function(){ 
          if (video.paused == true) video.play();
          else video.pause();
          }
     }
  }
});

Upvotes: 0

Related Questions