有没有人知道是否可以将HTML5视频与演示JavaScript Reveal.js连接起来,这样如果我在一张幻灯片上播放视频,当视频完成时,它会自动前进到下一张幻灯片?
Reveal.js有自己的eventHandler
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
字符串
但是我找不到任何关于幻灯片中的元素是否可以触发nextSlide功能的具体文档。
2条答案
按热度按时间oknrviil1#
这是我的答案,或者至少是我的答案。
你有一系列作为幻灯片的章节,其中一张幻灯片中有一段视频。
在该幻灯片中,您需要添加以下脚本:
字符串
请确保使用ID标记来标记视频元素,然后在此脚本中调用该ID标记。Reveal.next()是内置API的一部分,它将自动推进幻灯片显示。
uoifb46i2#
对于背景视频,事情变得稍微复杂一点,因为这些视频不能被赋予(AFAIK)唯一的ID。我让它像这样工作:
字符串
在调用
Reveal.initialize()
之后,将此脚本添加到页面底部:型
这种方法的优点是它基于幻灯片的
data-state
属性工作。换句话说,如果你有多张幻灯片都需要这个功能,你只需要添加data-state="next-after-video"
,它就可以工作了。