Adding Video and Audio - HTML5 Foundations - page 220

The code for this exercise can be found in folder 5.
Here are the steps for adding a JavaScript file:
1. Create a folder named js in the root of your project folder.
2. Within this new js folder, create a new file called video.js .
3. Open the video.js file in your text editor.
4. Copy the following code into this file. Here you create a variable ( video ) that contains a reference to the
<video> element on the page.
window.onload = function() {
// Get the video.
var video = document.getElementById(“myVideo");
}
5. Save the video.js file.
6. Open the about.html file in your text editor.
7. Add the following <script> element just before the </body> tag. This tells the browser to load the
video.js file into the About page.
...
<script src="js/video.js"></script>
</body>
8. Remove the controls attribute from the <video> element.
9. Save the about.html file.
That's it! Everything is set up, and you're ready to start building those custom controls. Let's get started.
Debugging Your JavaScript Code
If you encounter any problems when building the controls in this chapter, try using your browser's developer tools
to help you find any bugs that might be in your code.
Most modern web browsers have a JavaScript console as part of their developer tools. If the browser encounters
an error when trying to execute your JavaScript code, it prints the error message to this console. To access the
JavaScript console, click the Console tab in your developer tools.
When something is not working as you want it to, check this console for any errors. The errors can help you to pin-
point the problem with your code. It is often something as simple as a misspelling in a method name or a missing
semicolon from the end of a line.