Javascript 使用reveal.js逐步浏览视频文件 问题与疑问

在leaver.js演示文稿中，我想包含一个长视频文件。我想让playblack停在某些位置，这样我就有时间向观众解释他们看到了什么。然后，我想在单击时继续播放。我该怎么做

到目前为止没有成功的尝试 我的尝试如下。我将视频文件分成

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>

然而，这会带来一些淡入淡出的效果，这看起来很糟糕。我怎样才能避免褪色

---

进入视频幻灯片时，基本上可以通过调用

leave.disableEventListeners（）

禁用leave.js，然后将自己的逻辑绑定到keydown事件，直到浏览完所有视频，然后再次使用

leave.addEventListeners（）

启用leave.js

在转换到下一个视频时，需要进行一些额外的工作以避免闪烁。您可以在新视频中添加一个新的

元素，在CSS

z-index

的帮助下将其放置在当前

的顶部，播放新视频，然后删除旧视频

HTML Javascript 这有点长，但可以按需要工作

Reveal.addEventListener('slidechanged', function(event) {
    if ($(event.currentSlide).hasClass('video-stepper')) {
        // When we enter a slide with a step-by-step video, we stop reveal.js
        //  from doing anything. Below, we define our own keystroke handler.
        Reveal.removeEventListeners();

        // Set the width and height of the video so that it fills the slide.
        var stretcher = $(event.currentSlide).find('video.placeholder').get(0);
        var video = $(event.currentSlide).find('video.video-step').get(0);
        video.setAttribute('width', stretcher.getAttribute('width'));
        video.setAttribute('height', stretcher.getAttribute('height'));

        // Convert the data-sources attribute to an array of strings. We will
        // iterate through the array with current_video_index.
        var sources = JSON.parse(video.getAttribute('data-sources'));
        var current_video_index = 0;

        // Add a <source> element to the video and set the 'src' to
        // the first video.
        var source = document.createElement('source');
        source.setAttribute('src', sources[0]);
        video.appendChild(source);

        document.addEventListener('keydown', function step_through_videos(event) {
            if (event.which == 39) {
                // right arrow key: show next video

                // For the next video, create a new <video> element
                // and place it on top of the old <video> element.
                // Then load and play the new. This avoids flickering.
                var new_video = $(video).clone().get(0);
                var new_video_source = $(new_video).children('source').get(0);
                new_video_source.src = sources[current_video_index];
                new_video.load();
                $(new_video).addClass('front video-step');
                $(new_video).insertAfter(video);
                new_video.play();

                // Wait a little before removing the old video.
                new Promise((resolve) => setTimeout(resolve, 500)).then(function() {
                    video.remove();
                    video = new_video;
                    $(video).removeClass('front');
                });

                current_video_index = current_video_index + 1;

                event.preventDefault();
            } else if (event.which == 37) {
                // left arrow key: return the counter to previous video
                current_video_index = current_video_index - 1;

                event.preventDefault();
            }

            if (0 > current_video_index || current_video_index >= sources.length) {
                // Reinstall reveal.js handlers.

                document.removeEventListener('keydown', step_through_videos, true);
                Reveal.addEventListeners();
                console.log('Added reveal.js event listeners.');
            }
        }, true);
    }
});

leaver.addEventListener（'slidechanged'，函数（事件）{
if（$（event.currentSlide）.hasClass（'video-stepper'））{
//当我们进入带有逐步视频的幻灯片时，我们会停止discover.js
//下面，我们定义自己的击键处理程序。
Reveal.removeEventListeners（）；
//设置视频的宽度和高度，使其充满幻灯片。
var stretcher=$（event.currentSlide）.find（'video.placeholder'）.get（0）；
var video=$（event.currentSlide）.find（'video.video-step'）.get（0）；
video.setAttribute（'width'，stretcher.getAttribute（'width'）；
video.setAttribute（'height'，stretcher.getAttribute（'height'）；
//将数据源属性转换为字符串数组。我们将
//使用当前的视频索引遍历数组。
var sources=JSON.parse（video.getAttribute（'data-sources'）；
var当前视频索引=0；
//在视频中添加一个元素，并将“src”设置为
//第一个视频。
var source=document.createElement（'source'）；
setAttribute（'src'，sources[0]）；
视频。追加子项（来源）；
文档.addEventListener（'keydown'，功能步骤至视频（事件）{
if（event.which==39）{
//右箭头键：显示下一个视频
//对于下一个视频，创建一个新元素
//并将其放置在旧元素的顶部。
//然后加载并播放新的。这样可以避免闪烁。
var new_video=$（video.clone（）.get（0）；
var new_video_source=$（new_video）.children（'source'）.get（0）；
new_video_source.src=源[当前_video_索引]；
新建_video.load（）；
$（新视频）.addClass（'front video step'）；
$（新视频）.insertAfter（视频）；
新建_video.play（）；
//请稍等，然后再删除旧视频。
新承诺（（resolve）=>setTimeout（resolve，500））。然后（function（）{
video.remove（）；
视频=新视频；
$（视频）.removeClass（'front'）；
});
当前视频索引=当前视频索引+1；
event.preventDefault（）；
}else if（event.which==37）{
//左箭头键：将计数器返回到上一个视频
当前视频索引=当前视频索引-1；
event.preventDefault（）；
}
如果（0>当前视频索引| |当前视频索引>=sources.length）{
//重新安装reveal.js处理程序。
document.removeEventListener（'keydown'，step_至_视频，true）；
discover.addEventListeners（）；
log（'添加了reveal.js事件侦听器'）；
}
}，对）；
}
});

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

<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>

.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.addEventListener('slidechanged', function(event) {
    if ($(event.currentSlide).hasClass('video-stepper')) {
        // When we enter a slide with a step-by-step video, we stop reveal.js
        //  from doing anything. Below, we define our own keystroke handler.
        Reveal.removeEventListeners();

        // Set the width and height of the video so that it fills the slide.
        var stretcher = $(event.currentSlide).find('video.placeholder').get(0);
        var video = $(event.currentSlide).find('video.video-step').get(0);
        video.setAttribute('width', stretcher.getAttribute('width'));
        video.setAttribute('height', stretcher.getAttribute('height'));

        // Convert the data-sources attribute to an array of strings. We will
        // iterate through the array with current_video_index.
        var sources = JSON.parse(video.getAttribute('data-sources'));
        var current_video_index = 0;

        // Add a <source> element to the video and set the 'src' to
        // the first video.
        var source = document.createElement('source');
        source.setAttribute('src', sources[0]);
        video.appendChild(source);

        document.addEventListener('keydown', function step_through_videos(event) {
            if (event.which == 39) {
                // right arrow key: show next video

                // For the next video, create a new <video> element
                // and place it on top of the old <video> element.
                // Then load and play the new. This avoids flickering.
                var new_video = $(video).clone().get(0);
                var new_video_source = $(new_video).children('source').get(0);
                new_video_source.src = sources[current_video_index];
                new_video.load();
                $(new_video).addClass('front video-step');
                $(new_video).insertAfter(video);
                new_video.play();

                // Wait a little before removing the old video.
                new Promise((resolve) => setTimeout(resolve, 500)).then(function() {
                    video.remove();
                    video = new_video;
                    $(video).removeClass('front');
                });

                current_video_index = current_video_index + 1;

                event.preventDefault();
            } else if (event.which == 37) {
                // left arrow key: return the counter to previous video
                current_video_index = current_video_index - 1;

                event.preventDefault();
            }

            if (0 > current_video_index || current_video_index >= sources.length) {
                // Reinstall reveal.js handlers.

                document.removeEventListener('keydown', step_through_videos, true);
                Reveal.addEventListeners();
                console.log('Added reveal.js event listeners.');
            }
        }, true);
    }
});