To start, i don't know if this is the right category for it. If not please tell me.
I'm making a website that is basically a big automatic powerpoint presentation.
I load in all the images and videos, and show them 1 by 1.
However i have a problem...
It was al working well in the beginning. But now i'm about 60% done of filling in all the photos and videos. And now my videos wont load in to the website anymore.
I went on and checked the Network traffic, and saw the following:
As you can see, it loads all of the images (Wich is true because that is the only thing is see). And it cancels all the Media (Wich is also true because i only get a black screen then).
Is there a way to add a delay to what the browser gets?
For example one Slide is minimal 6 seconds long. And in those 6 seconds i only show 1 image. but the website asks for all of them to load.
If you want to see the code, below here is an short version. However you might not need that.
The code i have for the slideshow (A short version)
<!DOCTYPE html>
<html>
<head>
<title>VASIG | Innotrans 2016</title>
<link rel="stylesheet" href="Css/style.css">
<script src="scripts/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="background">
<!--
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@ High Speed @@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
-->
<!--
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@ Asset Optimization @@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
-->
<div class="slide" data-timing=12 data-fadein=0.5 data-fadeout=0.5>
<div id="begin">
Asset Optimization<br />
<b>Condition Based Wheelset Maintenance Planning</b>
</div>
</div>
<div class="slide" data-timing=16 data-fadein=0.5 data-fadeout=1 data-videopause=false>
<header>Asset Optimization - Condition Based Wheelset Maintenance Planning</header>
<video autoplay>
<source src="media/I_High_Speed/I_3/I-3_HighSpeed_01.mp4" type="video/mp4">
</video>
</div>
<div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5>
<header>Asset Optimization - Condition Based Wheelset Maintenance Planning</header>
<img src="media/I_High_Speed/I_3/HighSpeed-I-3-1_Wheelset-maint_set-summary.png" />
</div>
<div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5>
<header>Asset Optimization - Condition Based Wheelset Maintenance Planning</header>
<img src="media/I_High_Speed/I_3/HighSpeed-I-3-2_Wheelset-maint_set-configuration.png" />
</div>
<div class="slide" data-timing=21 data-fadein=0.5 data-fadeout=0.5 data-videopause=true>
<header>Asset Optimization - Condition Based Wheelset Maintenance Planning</header>
<video autoplay>
<source src="media/I_High_Speed/I_3/I-3_HighSpeed_03.mp4" type="video/mp4">
</video>
</div>
<div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5>
<header>Asset Optimization - Condition Based Wheelset Maintenance Planning</header>
<img src="media/I_High_Speed/I_3/HighSpeed-I-3-3_Wheelset-details.png" />
</div>
<div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5>
<header>Asset Optimization - Condition Based Wheelset Maintenance Planning</header>
<img src="media/I_High_Speed/I_3/HighSpeed-I-3-4_Maintain-axles.png" />
</div>
<div class="slide" data-timing=19 data-fadein=0.5 data-fadeout=0.5 data-videopause=true>
<header>Asset Optimization - Condition Based Wheelset Maintenance Planning</header>
<video autoplay>
<source src="media/I_High_Speed/I_3/I-3_HighSpeed_02.mp4" type="video/mp4">
</video>
</div>
<div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5>
<header>Asset Optimization - Condition Based Wheelset Maintenance Planning</header>
<img src="media/I_High_Speed/I_3/HighSpeed-I-3-5_Wheelset-detail-after-turn-of-axle.png" />
</div>
<div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5>
<header>Asset Optimization - Condition Based Wheelset Maintenance Planning</header>
<img src="media/I_High_Speed/I_3/I_3-Conclusion.png" />
</div>
</div><!--Background-->
</div><!--wrapper-->
And the script:
<script type="text/javascript">
var slides = $(".slide");
var lastSlideIndex = slides.length-1;
var currentSlideIndex = 0;
var defaultTiming = 1000;
var defaultFadeInTime = 1000;
var defaultFadeOutTime = 1000;
// Show slide function
function showSlide() {
var thisSlide = slides.eq(currentSlideIndex);
// Delays
var timing = parseFloat(thisSlide.attr("data-timing")) * 1000; // Transform seconds in milliseconds
if(isNaN(timing)){timing=defaultTiming; console.log("NOTICE: ----------- data-timing is missing, using default.");}
var fadeInTime = parseFloat(thisSlide.attr("data-fadein")) * 1000;
if(isNaN(fadeInTime)){fadeInTime=defaultFadeInTime; console.log("NOTICE: ----------- data-fadein is missing, using default.");}
var fadeOutTime = parseFloat(thisSlide.attr("data-fadeout")) * 1000;
if(isNaN(fadeOutTime)){fadeOutTime=defaultFadeOutTime; console.log("NOTICE: ----------- data-fadeout is missing, using default.");}
console.log("Slide: "+currentSlideIndex+":\n Display time: "+timing+" millisec.\n Fadein: "+fadeInTime+" millisec.\n Fadeout: "+fadeOutTime+" millisec.");
thisSlide.animate({"opacity":1},fadeInTime);
// If this slide contains a video
if(slides.eq(currentSlideIndex).find("video").length > 0){
// Prevents more than 1 video to play at the same time
$("video").each(function(){
console.log("All video paused.")
$(this)[0].pause();
});
// Play this video from the start
var thisVideo = slides.eq(currentSlideIndex).find("video")[0];
thisVideo.currentTime = 0;
console.log("Video playing.");
thisVideo.play()
}
// Prepare for next slide
currentSlideIndex++;
// Reset to slide 0 if last was reached
if(currentSlideIndex>lastSlideIndex){
currentSlideIndex=0;
}
setTimeout(function(){
// Fade out previous slide
var previousSlideIndex = currentSlideIndex-1;
// If previous was last slide
if(previousSlideIndex == -1){
previousSlideIndex = lastSlideIndex;
}
// If previous slide was set to pause
if(slides.eq(previousSlideIndex).attr("data-videopause")=="true"){
console.log("Video has been paused.");
slides.eq(previousSlideIndex).find("video")[0].pause();
}
slides.eq(previousSlideIndex).animate({"opacity":0},fadeOutTime);
showSlide();
}, timing);
}
// Init
showSlide();
</script>
