Question

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

我在<video>内使用<section>标记，因为data-background-video="something.mp4"似乎无法在幻灯片更改时重新启动。如果我从播放的视频幻灯片中导航然后返回到该视频幻灯片，则视频将从其停止的位置恢复，并且在我开始时不会重新启动，即使自动播放设置为true。

在Reveal.addEventListener用<section>命名data-state="something"之后，我尝试用 <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>上的api编写一些用javascript来做这件事的东西..它很有用..它很有效对于第一个视频，好吧，然后只有一段时间，它似乎打破所有视频播放。第二个视频播放一次然后将不会重新启动，然后我无法通过控制台控制它。

这是相关的html：

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

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

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

this

我可以在控制台中看到我输入的日志工作在正确的位置，但视频停止表现:(第二个视频将从控制台中的video2.play（）运行，但仅当第一个视频没有＆＃39; t已完成或第二个已经完成。

你可以说我的js编码目前不是很好，可能有很多错误，最终还有更好的方法。非常感谢任何帮助或建议，因为下周的节目非常需要!!

Answer 1

好的，所以我通过将video.load（）和video2.load（）添加到相应的Reveal.addEventListener部分来实现这一点。不确定这样做是否有任何问题或是否有更好的方法？
但是现在工作正常！：）

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

1 个答案: