Moving the CSS and JS to External Files
It's time to clean up our video controller and as such we are going to move out our files into separate files to ease control and modularity.
Video Transcript
00:00All right, so now that we got a hang of basically how to play videos and how to interact with them with JavaScript
00:05It's time for us to start creating our own custom
00:08Really component that would maybe sit on top of the video player and have a fuller more richer components more components
00:15All right, so let's get started now first step what I want to do is I separated
00:18I created two new files a style CSS and a video controller because we're starting to have a lot more code
00:24So just to get things more organized
00:26And again, if you want to get the source files
00:28You could always get them on zero to geek comm if you're one of our members already
00:33So enter into our file what I want to do first is let me just select this new file that we've just created
00:39And what I want to do is I just want to grab everything inside of our script tag
00:43Basically grabbing all of our JavaScript and moving it into its dedicated JavaScript file. I'm gonna save that
00:50We're not changing anything beyond that. Let me just flush it to the so it's nice and clean save that
00:56And let's do that also for our style that we have so far
00:59I'm gonna copy that and take it out click into the style and maybe push this back a bit save it
01:07Save our file as well. So nothing major has changed in our file
01:10Obviously now nothing will work because we're not loading the JavaScript file and we don't have the CSS as well
01:15So let me just delete the style attribute and said that we're gonna load in that external link of our
01:23style sheet and
01:27Our style sheet link is href
01:31And we're gonna set it to the actual link which is 0 0 3 style CSS and every video we are gonna be updating this so
01:39Basically automatically every time we move up to the next version just the number up here will change just to keep things clean
01:45So you guys could see the work as it's going on
01:48All right
01:49So our style is now in place our next step is to load in o to our script
01:53So now we don't have an inbound script
01:55So we could delete the inbound script and instead of the just type script
02:00We don't need to type anymore because by default JavaScript script is only JavaScript and our source will be that our new JavaScript source
02:08file, which is 0 0 3 video
02:11Controller dot JS all that's left for us to do is to double check and see that if actually everything is working to do that
02:19I'm just gonna go right into my browser. Just make sure I'm in the new file overlay click on the refresh
02:24Wait for that ready. If it comes and we know that our JavaScript loaded and when we click on the play
02:29We'll see that everything is still working. So we're really really happy now before we continue onwards now that we're working with external files
02:37I wanted to show you one more option that you could do with your JavaScript instead of waiting for the video to load
02:43Because obviously we don't really have to wait for the video to load load to actually have access to the video object
02:49But in this case because we're using the unload
02:52We're actually waiting for the video to partially load on certain browsers on Firefox. It's much faster on Safari
02:59It's much slower
03:00Another solution that we could do is actually going into our our code and we're gonna do that literally right now
03:06We could go to our code and basically grab our script tag
03:09And instead of having it load in the header have it load as the last thing just before we close our body
03:16Basically making sure that all the different rendering elements all the different DOM elements were rendered already before we even try to load the JavaScript file
03:24now by doing that we could actually
03:28Supervent and basically we won't need this on load anymore because everything inside of this on load should be a ready
03:36Set and ready to go
03:38So we're gonna test that out by just going right back into our browser after I've
03:43Deleted the unload function and had everything start up immediately and we'll see if it actually does work and work faster
03:50So if I click on refresh, we should be able to click away right away without waiting even before the document is completely ready
03:57Really? All right. So that is sir. There you go
04:00Obviously, this is a much better solution
04:01And now that we're in external files and we're actually starting to build up our application now
04:06You know all the different ways for you to work with your seat with your loading of your JavaScript
04:11And when do you want to actually load it up in the next video?
04:14We're gonna start playing with our components
04:16But before we do that what we want to do is we want to get rid of the controller
04:19So we could put our own custom controller
04:22So again, I'm gonna go right into our
04:25Editor and I'm just gonna go into the HTML itself and I'm going to search for our controls
04:29And I'm just gonna delete that line of controls
04:32I'm gonna save that file go back into our browser and now there won't be controls
04:37Behind our custom controls and our custom controls will be able to control the video pause and play it and we're gonna be adding more
04:44functionalities
04:45But before we do that
04:46It's time for us to actually add our video our controller to be in secret and integrated part of the video player
04:51Which we'll start doing in the following video