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

Question

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

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

在用 data-state="something" 命名 <section> 之后，我尝试使用 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 部分来实现它。不确定这样做是否有任何问题或是否有更好的方法？
然而，这现在工作正常！ :)

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

Reveal.js html5 video and javascript - restarting video playback from beginning on slide change problems

html

javascript

video

reveal.js