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

【问题标题】：use spacebar to play/pause video in reveal.js在reveal.js中使用空格键播放/暂停视频
【发布时间】：2015-05-21 12:48:06
【问题描述】：

我正在使用reveal.js 演示一些短视频剪辑（每张幻灯片1 个剪辑）。 Reveal.js 演示文稿的默认设置允许使用左/右箭头键在幻灯片之间导航。我想使用空格键（key=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 的绝对初学者，非常感谢您的帮助。谢谢！

【问题讨论】：

标签： javascript video reveal.js spacebars

【解决方案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();
          }
     }
  }
});

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 中无效，但这种方法有效

【讨论】：