我試圖製作一個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編碼目前並不好,可能有這麼多的錯誤,並最終成爲這樣做的更好方法。 任何幫助或建議是非常感謝,因爲它急需下週展會!