Question

我正在使用reveal.js来呈现一些短视频片段（每张幻灯片1个片段）。 reveal.js演示文稿的默认设置允许使用左/右箭头键在幻灯片之间导航。我想使用空格键（键= 32）播放/暂停视频，因此我试图更改/覆盖reveal.js中的默认键盘绑定。 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();
          }
     }
  }
});

Answer 2

谢谢！但是这个代码我只得到一个黑屏。但是，对于第一个剪辑，它的工作原理如下：

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

}）;

你知道我如何能够为其他剪辑/幻灯片做这项工作吗？视频ID是每张幻灯片上每个剪辑的“视频”：

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

Answer 3

我知道我要回复一个旧帖子。当我试图找到适合我的东西时发现了这个线程，它导致了我实现的解决方案。

其他解决方案似乎仅适用于一个视频，并且（结合我发现的其他建议）还有其他一些问题，例如空格键离开幻灯片后播放视频。

我使用了以下配置：

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

使用上述配置，只有当当前幻灯片上有视频时，空格键才会播放/暂停视频。否则，空格键将前进到下一张幻灯片。

某些其他解决方案在Chrome中有效，但在Firefox中不起作用，这是因为它们处理视频元素的方式不同，但是这种方法有效

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

3 个答案: