Join Justin Putney for an in-depth discussion in this video Creating the code for automatic playback, part of Creating an Advanced Responsive Presentation in HTML5.
We're working toward doing a self running slide show that you could just sit down at a presentation booth on some kind of tablet and have it play by itself. Have video, narration so let's start by adding the self running portion here. I'm in the chapter three folder, the exercise files in 01. In the Start folder. And I'm going to go into the js folder and open the pres.js file. Let's start by adding a few variables to control this. Again, so our functionality can be turned on or off as needed. So we'll create a new variable and call it autoPlaySlides.
I'm using CamelCase case here. And I'm going to set that to true. And I'm going to create another variable called slideDurations so I can control this easily. And I'm actually going to set this to a really short duration. It's going to be in milliseconds so each second is going to be a thousand. Now let's just do a thousand for debugging purposes. Every time I'm checking the file I don't want to sit and wait you know five, ten, fifteen seconds for each slide. So you can change this later when you're actually going to show your presentation. And then let's also create a variable called timer. And that will certainly keep track of the timer itself. Let's go down to the go to function.
And add a line at the end of the inside of the function. Let's say if auto play slides. Then let's auto next. Let's create that auto next function right now. So I'm going to say function, auto next and n is capitalized of course. Open of the function, I'm going to close it with a curly brace. And go back into the function. And I'm going to create a variable called duration and I'm going to set it equal to slide duration. So right now it doesn't make a lot of sense why I'm setting one variable equal to another, but it will as we add more functionality.
And let's say timer, that variable that we created at the top, is going to be equal to set time out. And inside of that we'll have a parenthesis, and we're going to say function. And two parentheses, and then a curly brace. And then we're going to call the next function inside of there. And then close it with a curly brace, comma, and then we're going to pass the second argument as duration. And I'm going to save that file. So this is a pretty imprecise timing mechanism. It's not going to be exactly a second or whatever your setting happens to be.
But it will work roughly well. If you want to have it more accurate, you actually have to check the date, like the number of seconds or milliseconds that have passed and do a comparison. But this'll work okay. And I'm also using the set time out function instead of the set interval. And that will allow me to basically make an adjustment on each slide. So it makes it much easier to pause the slide show. Or as you'll see in a moment, we'll actually change timing for different things. Where as a set interval will keep running. We'll actually call this set time out each time we need to. So let's open the HTML file in a browser and see what we've got so far. going to switch back to the finder and open index.html in a web browser. And so the timer should have fired by now, it's only set to one second. It's not working, you know, let me just hit the next arrow key. And, whoop, there it's working now.
So, why is that? Let's go back and take a look at our code. And the culprit might be that the autoplay functionality is getting called in go to. And when we initialize our slides we're actually calling a custom bit of code here. Well and let's just duplicate or let's say un duplicate because we've got some duplicate functionality and just go to in here and set that to zero. The first slide. So I'll save that, switch back over to browser and I'm going to refresh and there it's playing through.
Up until the bullet points, where when it gets to the first bullet point it stop of course because have that sort of step through bullet functionality. So let's get that bullet functionality working in the auto play as well. We'll do that in the next video.
Need more information on creating an initial web presentation? Watch the related HTML5 Projects: Creating a Responsive Presentation course.
- Embedding a Twitter feed in an iframe
- Creating the code for automatic playback
- Using MediaElement.js in your presentation
- Adding video and audio