Reveal.js html5 视频和 javascript - 在幻灯片更改问题上从头开始重新启动视频播放

Question

我正在尝试制作一个 kisok 应用程序来显示一些幻灯片并使用reveal.js 从菜单中播放 2 个视频。 除了视频播放之外，一切都运行良好，看起来很棒。

我在<section>使用了<video>标签，因为data-background-video="something.mp4"似乎也没有在幻灯片更改时重新启动。 如果我导航出正在播放的视频幻灯片然后返回到它，视频会从它停止的地方恢复，并且不会像我需要的那样从头开始，即使自动播放设置为 true。

在将<section>命名为data-state="something"之后，我尝试使用Reveal.addEventListener上的 api 使用 JavaScript 编写一些可以执行此操作的内容，并且它可以工作.. 很好......它仅适用于第一个视频，嗯，然后只是一段时间然后它似乎打破了所有的视频播放。 第二个视频播放一次然后不会重新启动，然后我也无法通过控制台控制它。

这是相关的html：

<!--*********************************************************Video 1 Page-->
                <section id="rene_vid_page" data-state="video1_show" data-transition="fade-in fade-out"  data-background="img/Backdrop.svg">
                    <h1 class="page_title">My page title</h1>
                    <video id="rene_vidplayer" data-autoplay data-src="Videos/full_edit_portrait.mp4" ></video>

<!--*********************************************************End Of Video 1 Page-->

<!--*********************************************************Video 2 Page-->
                <section id="conc_vid_page" data-state="video2_show" data-transition="fade-in fade-out" data-background-color="#c8c8c8">
                    <h1 class="page_title">My page title</h1>
                    <video id="conc_vidplayer" data-autoplay data-src="Videos/2 Conclusions.mp4" ></video>
                  </section>

<!--*********************************************************End Of Video 2 Page-->

这是我拼凑的javascript，当视频完成并且该位有效时，这也会前进到下一张幻灯片。

    <script>
                          var video = document.getElementById("rene_vidplayer");
                          video.onended = function (e) {
                                console.log("video_ended slide advance");
                                 Reveal.next();
                    };        
                            Reveal.addEventListener('video1_show', function (e) {

// Called when "video1_show" slide is made visible

                                console.log('"rene video show has been called"');
                                video.currentTime = 0;
                                console.log('"videotime set to 0"');
                                video.play();
                                console.log('"video set to play"');

                            });

                            var video2 = document.getElementById("conc_vidplayer");
                            video2.onended = function (e) {
                                console.log("video2_ended slide advance");
                                Reveal.next();
                            };

                            Reveal.addEventListener('video2_show', function (e) {
// Called when "video2_show" slide is made visible

                                console.log('"video2_show has been called"');
                                video2.currentTime = 0;
                                console.log('"videotime set to 0"');
                                video2.play();
                                console.log('"video2 set to play"')
                            });

    </script>

我可以在控制台中看到我放入的日志在正确的位置工作，但视频停止运行:( 第二个视频将从控制台中的 video2.play() 运行，但前提是第一个视频尚未完成或者第二个已经玩过了。

你可以看出我的 js 编码目前不是很好，可能有很多错误，最终有一个更好的方法来做到这一点。 非常感谢任何帮助或建议，因为下周的演出迫切需要它！！

Answer 1

好的，所以我通过将 video.load() 和 video2.load() 添加到相应的 Reveal.addEventListener 部分来使其工作。 不确定这样做是否有任何问题，或者是否有更好的方法？
然而，这现在工作正常！ :)