HTML5 Video Play and Pause API
It's time we dig into the JavaScript Video API. By the end of this video we will have a video player that has a custom pause/play button created using the JavaScript HTML5 Video API.
Video Transcript
00:00Alright, let's continue and it's time for us to actually take our button and give it that action that enables this enables it to toggle on and off
00:07Now one way we could do it is just by directly and you know what?
00:11I'm gonna first create that functionality and show you why we can't really do it this way
00:15So first of all, I could just add directly an on click event and just have it call for example the function toggle video
00:23Now as soon as we call this toggle video it's and it's inside of our JavaScript. That's it
00:28We don't have any control on when we're it's gonna click and when not so if I'm gonna call it create that function toggle video
00:35And I'm gonna call the toggle video and for example
00:39I'm just gonna go to that video and just console log the video paused which basically will return the value true or false base in
00:47The video is toggled or not if it's playing or not
00:51so if I go back into the browser and I click on refresh on Safari and
00:56I wait for the load to happen and then I click on the play pause
01:00I will see that really the value is true the video is paused
01:04But if I refresh and I don't wait and I immediately click on the play
01:07We'll see that we're gonna get an error and we want to avoid those type of errors if we can
01:12now the way to avoid it is making sure that we don't add the actual functionality on to the button until the button is
01:18active or we could hide the buttons and only reveal them once the videos are
01:22Operational once the video once these buttons would work. So let's let's go to the approach of basically adding the function
01:30functionality dynamically
01:32So instead of using the on click attribute directly in the HTML of the button instead of that
01:37I'm gonna create a button ID and I'm gonna call my button ID toggle
01:43Now that I have a toggle button
01:45I'm ready to approach it because I know when my video is ready
01:49So basically when when the element is ready here, it's time for us to add extra functionality
01:54So I'm just gonna go to my document
01:56Doc you meant and the same way that I got my element by ID
02:01Just the way I got my my video. I'm gonna get my toggle button now that I got the toggle button
02:07I could approach the on click event and notice that I'm using lowercase again because if I use an uppercase
02:13It's not gonna work JavaScript is a link is a case sensitive language
02:17So I'm gonna approach the on click and I'm gonna tell the on click once you happen call the toggle video
02:24Now that I've set my document in this way
02:26If I go back into my browser and I refresh the browser and I try to click before it's loaded
02:32Nothing will happen once the application is ready and we start clicking on it
02:36Now the value will actually start happening
02:39So the the actual event will only be connected to the button once the button is ready to really react to those events
02:47Now that we've got that set all that's left for us is to actually create the actual functionality the actual
02:53Plug and play the actual pit play and pause of the video and that is really easy as well
02:58So back in my editor now that we know that our video is paused
03:01I could basically ask if our video is paused will do one action
03:06Well, if the video is not paused then we'll do the other action
03:10So the first action that we really want to do is if the video is paused
03:14What do we want to do if it's pause we want to play it?
03:16So I'm gonna go to my vid and I'm gonna call the play method
03:21Now the video is playing will want to pause it to pause it
03:25I'm gonna call the pause function and that's all I had to do to create a toggle
03:30Play and pause functionality directly into my into my player
03:35Now I'm gonna face save that go back into our browser
03:38And if we go into the browser itself, we'll see that if I press on the pause or play button
03:44It's not going to do anything until it's ready. Once it is ready
03:47We'll see that the video is going to start playing and once we click on the pause the video would pause again
03:52And they would play again
03:53So we have an interactive video button that is external to the video player that we have full control over it