Building a Custom Video Player Web Design Sec 6-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives Explain what an API is, and how you can use it to control the content of web pages. Use JavaScript to control the HTML5 video element.

Building Custom Video Contols Earlier in this course you learned to add video to web pages using the <video> element. You may have noticed that the built-in video player is slightly different in every browser. If you want a player that looks consistent across all browsers, or if you just a want a player that is uniquely your own, you can totally do that with JavaScript. In this lesson, you will use JavaScript to build custom controls for playing your video, and will use your custom controls to replace the browser's built-in controls.

The HTML5 Media API Once you've embedded media into your web page using the new HTML5 <audio> or <video> elements, you can control them using JavaScript code. This is because HTML5 has an API that enables external control of these elements. API stands for "application program interface", and it consists of a set of variables and methods that can be accessed by external scripts or programs.

APIs APIs are common on the web. A few popular examples include: Flickr API for managing photos YouTube API for managing videos Twitter API for creating new Twitter applications Facebook API for developing Facebook apps Google Maps JavaScript API

APIs The documentation for APIs such as those are technical and can be overwhelming at first, but buried within all the technical details are typically some simple examples to help you get started. The official documentation for the HTML5 media API is contained within the HTML5 spec. Today’s work gives you a much-simplified look at the basics.

Your Turn… Download the homework for today. Add buttons to control your video player. Make sure you customize the buttons to match your web page.

My graphics.html Page