HTML5 Video OnComplete下一张幻灯片Reveal.js [英] HTML5 Video OnComplete Next Slide Reveal.js

问题描述

有人知道是否可以将HTML5视频与演示文稿JavaScript Reveal.js连接起来，这样如果我在一张幻灯片上播放视频，则当该视频播放完毕后，它会自动前进到下一张幻灯片吗?

Does anyone know if one can connect a HTML5 Video with the presentation javascript, Reveal.js so that if I play a video on one slide, when that video is complete, it would automatically progress to the next slide?

Reveal.js有它自己的eventHandler

Reveal.js has it's own eventHandler

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

但是我找不到关于幻灯片中的元素是否可以触发nextSlide功能的任何特定文档.

But I cannot find any specific documentation on if elements inside a slide can trigger the nextSlide functionality.

推荐答案

所以...这是解决方案，或者至少是我想出的答案.

SO... here is the solution, or at least the answer that I came up with.

您有一系列用作幻灯片的部分，以及其中一个幻灯片中的视频.

You have a series of SECTIONS that are acting as the slides, and a video in one of those slides.

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

in THAT slide, you need to add the following script:

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

确保使用ID标签标记视频元素，然后在此脚本中调用该ID标签. Reveal.next()是内置API的一部分，该API会自动进行幻灯片放映.

Make sure you label your video element with an ID tag, and then call that ID tag in this script. The Reveal.next() is part of the built-in API that will automatically progress the slideshow.

这篇关于HTML5 Video OnComplete下一张幻灯片Reveal.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！