Join Joseph Labrecque for an in-depth discussion in this video Creating a video element, part of Building Custom HTML5 Video Playback with AngularJS 1.
If I go back to Brackets, we can see that we have a video folder in there now. It's automatically updated it for us. And inside of there is our mp4 file that we're going to reference for our video playback. I'll add some space within the body of our HTML document and paste in a video tag snippet that's already been created here. I'm setting the width and height of this, and I'm also pointing it to our video folder and this particular mp4 file. I'm also making sure to turn controls on.
If you want the browser to just render its normal standard controls, all you need to do is say controls within your video tag and that will happen. What we'll do now is actually demo this, so if you're using anything else aside from Brackets, you can always go ahead and just open up this index.html file. Within your browser, Brackets has this extra little live preview option that I'm going to use here. And we'll hit OK to dismiss this default message it gives us.
And at this point, we can see that it does indeed render out our video with a set of playback controls. So if we scrub around, we can see how that works, we can play back, we can change the volume, we can make it full screen, and we get a little time readout. This is just how Chrome, which is the browser I'm using, decides to render these things. Every browser's going to be a little bit different. And we now have the basics of an HTML playback within our project.
- Setting up
- Creating a video element
- Making the video element responsive
- Building controls
- Setting up an AngularJS controller
- Binding properties
- Customizing the playback controls and time display
- Enabling full-screen playback and playlist support
- Using AngularJS directives and filters