javascript - 使用 Reveal.js 逐步浏览视频文件

Question

问题和疑问

在 Reveal.js 演示文稿中，我想包含一个长视频文件。我想让黑戏停在某些位置，这样我就有时间向观众解释他们所看到的内容。然后，我想在单击时继续播放。我怎样才能做到这一点？

到目前为止未成功的尝试

我的尝试如下。我将视频文件分成 1.webm、2.webm、3.webm 等部分，这样每个部分都在我的位置结束想休息一下。我的想法是

1. 覆盖 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>
   

2. 使用片段并在视频显示时自动播放视频:

   <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 ，然后将您自己的逻辑绑定(bind)到 keydown 事件，直到您单步浏览完所有视频，然后使用 Reveal.addEventListeners() 再次启用 Reveal.js。 .

需要付出一些额外的努力才能避免在转换到下一个视频时出现闪烁。您可以添加新的 <video>包含新视频的元素，将其放置在当前 <video> 的顶部在CSS的帮助下z-index ，播放新视频，然后删除旧视频。

HTML

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

CSS

.video-stepper {
    position: relative;
}

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

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

video.placeholder {
    visibility: hidden;
}

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);
    }
});