Video: LoopingAt some point you may have a need for the video to loop, meaning, when it finishes it goes back to beginning and plays again. I can only think of one specific use case for this and that's when you're using video as a type of design animation to add to the ambiance of the page, like clouds scrolling in the background. Be careful with that though, because a lot times an element like that can actually be distracting for the user and take away from the experience rather than adding to it. With that in mind though, let's add looping to our video. Going over to our code we're now in the 2-05 folder, if you're following with the exercise files.
- Further exploration
Viewers: in countries Watching now:
- Understanding the differences in media formats
- Preloading, autoplaying, and looping in HTML5
- Setting a video's width and height attributes
- Displaying subtitles and captions
- Generating embed code with an embed code builder
- Encoding files using HandBrake, Firefogg, and VLC
- Creating a load progress bar
- Recognizing Android and iOS issues
At some point you may have a need for the video to loop, meaning, when it finishes it goes back to beginning and plays again. I can only think of one specific use case for this and that's when you're using video as a type of design animation to add to the ambiance of the page, like clouds scrolling in the background. Be careful with that though, because a lot times an element like that can actually be distracting for the user and take away from the experience rather than adding to it. With that in mind though, let's add looping to our video. Going over to our code we're now in the 2-05 folder, if you're following with the exercise files.
We have our video tag with the controls attribute, all our sources, preload attributes set to auto, and an autoplay attribute so the video starts playing automatically. And what we need to do to add looping is add the loop attribute. This is a Boolean attribute, so it is either true or false. It's true if we include it, and false if we don't. And I'll save that. And there is one more thing, I've added a clouds movie, just like we're talking about using a clouds movie in the background, just to kind of give us a better idea of what that would look like.
So I'm just changing the podcast movie to clouds and I'll save that and then we can go over. I'm going to preview this in Chrome or reload it and we can see the video is playing. It is playing our clouds video and hopefully when it gets to the end it will just go right back to the beginning. Okay, great, so looped as expected. Now one unfortunate thing with loop and the reason I'm using Chrome for this one, is that Firefox does not yet support it, while all other HTML5 browsers do.
So let's go and look at Firefox. If we reload the same page, now I'll jump to the end, you see it just stops so it doesn't go back to the beginning like we would expect it to do with loop. So up to the first release of Firefox version 4, it doesn't support loop. I haven been told that they will support it eventually, but it will take more work for them than it might seem, because the need for a smooth transition from the last frame back to the first. So we don't know exactly when that would be, but they haven't at least decided not support it at all.
So binding to the ended event, so basically the video element has an ended event that fires every time that the video ends, and so we want to bind a function to that event and then we can pass a function to the bind to tell it what we want it to do when the end event happens. We're now kind of in the scope of the video element, so we can use the this variable to reference our video. This represents the video element and then the video element has a play function that will just tell the video to play.
Okay, so we're saying, with my video we want bind to the ended event and any time the video ends, we want the video to play. So pretty straightforward. I'm going to go ahead and save that and then go to Firefox and reload the page. I'm just going to jump ahead to the end and it goes back to the beginning, great! So, we just looped it manually. I'm just going to go over to Chrome real quick to make sure it's still working there. Fast forward it.
All right, now I'm back to beginning too. So great! Now we have manually looped it and we don't need the loop attribute, so it'll work as expected in all the browsers. With that though, you should be able to loop your videos consistently when needed and the exact same thing will work for audio. But again with both video and audio be careful with looping because in more cases than not it could be a distraction or annoying for your users.
There are currently no FAQs about HTML5: Video and Audio in Depth.