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

Question

I'm trying to make a kisok application to show some slides and play 2 videos from a menu using reveal.js. it is all working well and looks great apart from the video playback.

Im using a <video> tag inside the <section> as the data-background-video="something.mp4" didn't seem to restart on slide change either. If i'm navigating out of the playing video slide and then returning to it, the video resumes where it left off and doesn't restart at the beginning as I require like even though autoplay is set to true.

I have tried to write something that does this with javascript using the api on Reveal.addEventListener after naming the <section> with data-state="something" and it works.. well kind of.. it works successfully for the first video only, well, then only for a while then it seems to break all video playback. the second video plays once then will not restart and i then can not control it via the console either.

here is the relevant 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-->

Here is the javascript i have cobbled together, this also advances to the next slide when the video is finished and that bit works..

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

I can see in the console that the logs i have put in are working in the right places but the video stops behaving :( the second video will run from video2.play() in the console but only if the first one hasn't finished or the second one been played already.

You can tell that my js coding is not great at the moment and there are probably so many errors, and ultimately a much better way of doing this. Any help or advice is greatly appreciated as it is desperately needed for a show next week!!

Answer 1

Ok, so i got this to work by adding a video.load() and video2.load() into the respective Reveal.addEventListener sections. Not sure if there are any problems associated with doing it this way or whether there is a better way?
However this is now working fine! :)