2015-09-06 70 views
-1

我試圖製作一個kisok應用程序來顯示一些幻燈片,並使用reveal.js從菜單播放2個視頻。除了視頻播放之外,它都運行良好並且看起來很棒。Reveal.js html5視頻和javascript - 從幻燈片更改問題開始重新開始視頻播放

我在<section>內使用<video>標籤,因爲data-background-video="something.mp4"似乎沒有重新開始幻燈片更改。 如果我從播放的視頻幻燈片中導航並返回到視頻幻燈片,視頻將從停止位置恢復,並且不會在開始時重新啓動,因爲即使自動播放設置爲true,我也需要。

我試圖寫一些東西,用JavaScript使用API​​命名<section>data-state="something"後做到這一點就Reveal.addEventListener和它的作品..好樣的..它只能成功第一視頻,順利的話只對一段時間後,它似乎打破了所有的視頻播放。第二個視頻播放一次然後不會重新啓動,然後我無法通過控制檯控制它。

這裏是有關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> 

我可以在控制檯中看到日誌i ha已經投入工作在正確的地方,但視頻停止行爲:(第二個視頻將從控制檯中的video2.play()運行,但前提是第一個視頻未完成或第二個視頻已經播放。

你可以說我的js編碼目前並不好,可能有這麼多的錯誤,並最終成爲這樣做的更好方法。 任何幫助或建議是非常感謝,因爲它急需下週展會!

回答

0

好的,所以我通過在各自的Reveal.addEventListener部分中添加video.load()和video2.load()來實現此目的。不知道這樣做是否有任何問題,或者是否有更好的方法?
但是這現在工作正常! :)