Customizing controls for media elements

Media elements, currently video and audio, can be controlled using JavaScript since the elements theme self contain useful methods and attributes. In this recipe, we will go through some of the most basic functionality and methods that can be applied on elements that have the HTMLMediaElement interface.

Note

Specification on the HTML5 media element can be found at http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement.

Getting ready

In this recipe we will also need a video file, so we can use the same one from the previous recipe.

How to do it...

We start by creating a JavaScript controller that will have very rudimentary functionality of a media player.

1. Our controller methods will accept a selector for a command and execute the command, we need the following:

   var videoController = (function () {
     var my = {};
     function findElement(selector){
      var result = document.querySelector(selector);
      if (!result) {
       throw "element " + selector...