Join Justin Putney for an in-depth discussion in this video Moving to the next slide when the video completes, part of Creating an Advanced Responsive Presentation in HTML5.
Now let's add autoplay capabilities to the video.…Not only when the video starts, but when the video ends we want it to advance to…the next slide. So in the chapter four, 03 start folder.…We're going to navigate to the js older, and open pres.js in Dreamweaver.…Let's add a variable after autoplay slides.…For autoPlayMedia, and we'll set that to true.…Let's also add a variable called autoNextOnMediaEnd and we'll set that to…true as well. And then in order to have the video…advance when it completes, let's add an event listener to the media element itself.…
So where we created the success function. Just going to go in here and tab a little…bit to make it a little neater. And say media element.…This is the incoming argument. And on that media element, I'm going to…add an event listener. The event I'm looking for is ended.…That will get called when the media file has finished playing.…And I'm going to then call a function and that function is going to have an argument…of m. That'll be a media player.…
And then I'm going to open that with a curly brace, and say if.…
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