HTML5视频完成后如何在Reveal.js中显示下一张幻灯片

Question

有人知道是否可以将HTML5视频与演示文稿JavaScript（Reveal.js）连接起来，以便如果我在一个幻灯片上播放视频，当该视频播放完毕时，它会自动进入下一张幻灯片吗？

Reveal.js具有自己的事件处理程序。

Reveal.addEventListener( 'customevent', function() {
    console.log( '"customevent" has fired' );
} );

但我找不到任何关于幻灯片内部元素是否能触发nextSlide功能的具体文档。

- Murphy1976

Answer 1

那么……这里是解决方案，或者至少是我想出来的答案。

您有一系列充当幻灯片的“部分”，以及其中一个幻灯片中的视频。

在该幻灯片中，您需要添加以下脚本：

<script>
     var video = document.getElementById("myVideo");
     video.onended = function(e) {
          Reveal.next();
     }
</script>

请确保您的视频元素使用ID标签进行标记，然后在此脚本中调用该ID标签。Reveal.next()是内置API的一部分，它将自动推进幻灯片演示。

- Murphy1976

Answer 2

对于背景视频，情况会变得更加复杂，因为它们（据我所知）无法被赋予唯一的ID。我设法通过以下方式使其正常工作：

<section
  data-background-video="thevideo.webm"
  data-state="next-after-video"
></section>

使用以下脚本添加到页面底部，在调用Reveal.initialize()之后：

function register_video_onend(may_retry_later) {
  let video = document.querySelector(".slide-background.present video");
  if (video == null) {
    if (!may_retry_later) {
      console.log("no video found");
      return;
    }
    window.setTimeout(register_video_onend, 1);
    return;
  }
  console.log("video found, will go to next slide when it ends");
  video.onended = (e) => {
    console.log("going to next slide after video ended");
    Reveal.next();
  };
}

Reveal.addEventListener("next-after-video", () =>
  register_video_onend(true)
);

这种方法的优点在于它基于幻灯片的"data-state"属性工作。换句话说，如果你有多个幻灯片都需要这个功能，只需给它们添加"data-state="next-after-video""，它就会起作用。

- dr. Sybren