We've talked about how audio and video share the same API in the HTML5 specification. In this section, we'll discuss taking the video JavaScript we've written and abstracting it so that we can re-use it for audio playback.
First, let's create a new JavaScript file in our
jsdirectory and name itApp.MediaElement.js.Next, copy over the contents of
App.Video.jsinto the newApp.MediaElement.jsfile.In this step, we want to make sure that our file reflects the
MediaElementnamespace, so we'll rename the wordVideoasMediaElement.
Once we've renamed everything to MediaElement, we probably want to remove the default elements and their names, because they won't be necessary for an abstracted class like this one. Along with those defaults, we won't need the public fullscreen method nor the onFullScreen callback.
When we make the preceding changes, our file should look like this:
var App = window.App || {};
App.MediaElement = (function(window, document...