Hello, in this JavaScript video, I am going to show you how to control multimedia. So we got this html5 video right here, there are a couple of buttons at the moment, they don't do anything, they are just part of the form. I just hooked them up. It's nothing. This is nothing new. We've learned that the onclick event before, if you haven't, feel free to go back and check out the events video, and then feel free to come back.
Yeah, we got this little video, I could, you know, just, you know, go here show control and play this video like so. But I want to be able to trigger using a JavaScript event. In this case, we're going to keep it simple and just have buttons are triggered. But you might have some sort of other condition that triggers as well maybe when your page loads, it automatically starts playing the video. Maybe when you are no longer focused on the video element or even on the page it you know stops or pauses the video cinema like that where you're not directly interacting with the video, but you want the video to be modified in terms of its playback. So we've got the buttons are already hooked up fortunate for us it's really simple.
To do this all we have to do. First of all, we're going to create a variable. I'll call it my video, and this is going to get an image that is the video we're gonna get get it by the ID, the ID sign is video one. Get that back here. And now we are just going to do a little check. So we're gonna say if mo video dot pause so this means the video is paused.
If it paused, we won't actually play it. My video dot play. If it goes into the elf block, that means it's already playing and we just want to can you hear So now let's run it, see what we get so far, click play, pause, click again. And you can see he played it positive. But we also want to be able to stop it. To do that, we need this bit of code here that either a direct to stop button or you know stop command.
So what you have to actually do do my video course Of course, but then to my video current point, essentially set the current time to zero. And you know, Click pause the answer back to the start. This is safety, not stopping it. So reload it, play pause, fixed up, as you can see, that was a okay and that played it from start to finish. And that's it for controlling multimedia. Or I want you to do or the next task is have two extra buttons, one for forwarding and one for rewinding and implement them.
You'll need some for variables. There will be some other really cool features of the JavaScript Moulton media controls that he uses lots of for free to take a look at that. If you have any questions, feel free to pop me a message and I look forward to seeing you in the next video.