javascript - 在 Reveal.js 中使用空格键播放/暂停视频

Question

我正在使用 Reveal.js 演示一些短视频剪辑(每张幻灯片 1 个剪辑)。 Reveal.js 演示文稿的默认设置允许使用左/右箭头键在幻灯片之间导航。我想使用空格键(key = 32)来播放/暂停视频，因此我尝试更改/覆盖reveal.js中的默认键盘绑定(bind)。 https://github.com/hakimel/reveal.js/建议如下:

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

我尝试插入多个代码/函数，但是当我尝试在浏览器上运行代码时，要么出现黑屏，要么什么也没有发生。

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

如您所见，我是 JS/reveal.js 的绝对初学者，非常感谢您的帮助。谢谢!

Answer 1

这将解决您的问题:

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

对于自定义键盘事件:

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