Reveal.js html5 비디오 및 자바 스크립트-슬라이드 변경 문제에서 처음부터 비디오 재생 다시 시작

저는 reveal.js를 사용하여 슬라이드를 표시하고 메뉴에서 2 개의 비디오를 재생하는 kisok 애플리케이션을 만들려고합니다. 그것은 모두 잘 작동하고 비디오 재생과는 별도로 멋지게 보입니다.

임은 사용 <video>내부에 태그를 <section>(가)로 data-background-video="something.mp4"슬라이드 변화 중 하나에 다시 시작하는 것 같지 않았어요. 재생중인 비디오 슬라이드를 탐색 한 다음 다시 돌아 가면 비디오가 중단 된 지점에서 다시 시작되고 자동 재생이 true로 설정되어 있어도 필요에 따라 처음부터 다시 시작되지 않습니다.

나는에 API를 사용하여 자바 스크립트로이 작업을 수행 쓰기 뭔가 시도 Reveal.addEventListener이름을 지정 이후 <section>로 data-state="something".. 그것은 잘 작동 종류 그것은을 위해 만 만 잘 첫 번째 비디오 성공적으로 작동합니다 ..의 그것은 휴식 보인다 동안 모든 비디오 재생. 두 번째 비디오가 한 번 재생되면 다시 시작되지 않으며 콘솔을 통해 제어 할 수 없습니다.

다음은 관련 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-->

다음은 내가 함께 만든 자바 스크립트입니다. 동영상이 완료되고 해당 비트가 작동하면 다음 슬라이드로 넘어갑니다.

    <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 코딩이 현재 훌륭하지 않고 오류가 너무 많으며 궁극적으로이를 수행하는 훨씬 더 나은 방법이라는 것을 알 수 있습니다. 다음 주 공연을 위해 절실히 필요한 도움이나 조언을 부탁드립니다 !!