Question

问题和疑问

在reveal.js演示文稿中，我想要包含一个长视频文件。我希望将播放器停在某些位置，以便我有时间向观众解释他们所看到的内容。然后，我想在点击时继续播放。我怎么能这样做？

到目前为止尝试失败

我的尝试如下。我将视频文件拆分为1.webm，2.webm，3.webm等部分，以便每个部分结束我想休息的地方。我的想法是

覆盖Reveal.js的keydown事件，以便它不会转到下一张幻灯片，而是执行我的Javascript。我怎么能这样做？

<div class="slides">
    <section class="video-stepper">
        <video>
            <source data-src="1.webm" type="video/webm" />
        </video>
    </section>
</div>

<script>
    $(function() {
        // How can I do this?
        Reveal.addEventListener('click', function(event) {
            if ($(event.currentSlide).hasClass('video-stepper')) {
                event.preventDefault();
                // change 'src' of the video element and start the playback.
            }
        });
    });
</script>

使用片段并在显示视频时自动播放视频：

<div class="slides">
    <section class="video-stepper">
        <video class="fragment current-visible video-step">
            <source data-src="1.webm" type="video/webm" />
        </video>
        <video class="fragment current-visible video-step">
            <source data-src="2.webm" type="video/webm" />
        </video>
        <video class="fragment current-visible video-step">
            <source data-src="3.webm" type="video/webm" />
        </video>
    </section>
</div>

<script>
    $(function() {
        Reveal.addEventListener('fragmentshown', function(event) {
            if ($(event.fragment).hasClass('video-step')) {
                event.fragment.play();
            }
        });
    });
</script>

从问题Hide reveal.js fragments after their appearance中取出一些CSS，以便片段叠加在一起：

.fragment.current-visible.visible:not(.current-fragment) {
    display: none;
    height:0px;
    line-height: 0px;
    font-size: 0px;
}

但是，这会带来一些淡入淡出，看起来很糟糕。如何避免褪色？

Answer 1

进入视频幻灯片时，您基本上可以通过调用Reveal.disableEventListeners()来禁用reveal.js，然后将您自己的逻辑绑定到keydown事件，直到您完成所有视频，然后再使用{再次启用reveal.js {1}}。

在转换到下一个视频时，需要做一些额外的工作来避免闪烁。您可以使用新视频添加新的Reveal.addEventListeners()元素，在CSS <video>的帮助下将其置于当前<video>之上，播放新视频，然后删除旧视频。< / p>

HTML

z-index

CSS

<section class="video-stepper">
    <!-- Unlike the other <video> element, this one is not absolutely 
         positioned. We hide it with CSS, but use it to reserve space
         on the slide and compute the optimal width and height. -->
    <video class="placeholder stretch">
        <source src="1.webm">
    </video>

    <video class="video-step" data-sources='["1.webm","2.webm","3.webm"]'></video>
</section>

的Javascript

这有点冗长，但可以按照需要运作。

.video-stepper {
    position: relative;
}

video.video-step {
    position: absolute;
    top: 0;
    left: 0;
}

video.video-step.front {
    z-index: 10;
}

video.placeholder {
    visibility: hidden;
}

使用reveal.js逐步浏览视频文件

问题和疑问

到目前为止尝试失败

1 个答案:

HTML

CSS

的Javascript