Before we get into Angular itself, let’s have a look at the basics of playing video in HTML. Progressive video playback can be easily performed through the use of an HTML video element.
- [Voiceover] Before we get into Angular itself, let's have a look at the basics of playing video in HTML. Progressive video playback can be easily performed through the use of an HTML video element. Let's open up our index.html within our editor, and you can see that there's not really much of anything in here right now. We have our head information like the title, and then we have our body, which has nothing in it, so let's go ahead and add a video element to this.
I'm going to paste in a snippet here, and this video element starts with video, it has a source attribute which we set to video/cow.mp4. Note that this isn't actually included inside of our video folder yet, so we need to put it in there. We set the width and height of our video, and we use the attribute controls to make sure that the controls will show up so we can control the playback easily.
It's important to note here the look and functionality of the controls for the HTML video element are going to depend solely on the native browser. To grab our videos, there is a video folder located in the exercise files for this chapter, and there are four different videos in there, including cow.mp4. Let's go ahead and copy all of these into our video folder. We now have all four mp4 files contained within the video folder. Let's go ahead and save our index.html file, and inside of our CSS folder, we're going to create a new file, and we'll name this app.css.
So within app.css I'm going to paste in some definitions from our snippets file, and this is going to control the HTML and body. I'm setting the background color. I'm also setting the text color, and pretty much turning off all the padding and margins, so setting those both to zero, and setting overflow to hidden. We'll go ahead and save our CSS file. Jumping back over to our HTML file, within our head element, I'm gonna go ahead and create a new link to this stylesheet, so I'll use a link tag, and we'll set its relation to stylesheet and set the href equal to css/app.css, and then close that out and hit save.
So now that we have our video in our video folder and a new CSS file created in our CSS folder and all of this included within our index.html, let's pop back over to the browser and see what everything looks like. Alright, so we can see that node has gone ahead and updated all these files for us, and here is the video of our cow. I can resize this of course, but it's not really responsive just yet.
So we now have a basic video player running along with some custom CSS to make things look a little nicer.
- Setting up the project
- Using the Node Package Manager
- Building an Angular component
- Bootstrapping the application
- Creating a service
- Data binding
- Controlling sound and playback
- Animating player controls