jquery HTML5 Video OnComplete Next Slide Reveal.js

liwlm1x9  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(111)

有没有人知道是否可以将HTML5视频与演示JavaScript Reveal.js连接起来,这样如果我在一张幻灯片上播放视频,当视频完成时,它会自动前进到下一张幻灯片?
Reveal.js有自己的eventHandler

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

字符串
但是我找不到任何关于幻灯片中的元素是否可以触发nextSlide功能的具体文档。

oknrviil

oknrviil1#

这是我的答案,或者至少是我的答案。
你有一系列作为幻灯片的章节,其中一张幻灯片中有一段视频。
在该幻灯片中,您需要添加以下脚本:

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

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

uoifb46i

uoifb46i2#

对于背景视频,事情变得稍微复杂一点,因为这些视频不能被赋予(AFAIK)唯一的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",它就可以工作了。

相关问题