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!

回答1:

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

回答2:

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>