add fullscreen

dev/audioplayer_control/control.css

-button.loop{width:10em}#visualizer{text-align:center}#video{text-align:center}video#videoControl{width:50%;height:20%}canvas#can{width:50%;height:20%}progress.bar{position:inherit;display:block;height:1em;width:100%;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;-moz-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;-webkit-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444}
\ No newline at end of file
+button.loop{width:10em}#visualizer{text-align:center}#video{text-align:center}video#videoControl{width:50%;height:20%}canvas#can{width:50%;height:20%}video::-webkit-media-controls-enclosure{display:none!important}progress.bar{position:inherit;display:block;height:1em;width:100%;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;-moz-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;-webkit-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444}
\ No newline at end of file

dev/audioplayer_control/control.js

@@ -188,7 +188,7 @@
             });
         }
     }).declareMethod("startService", function() {
-        var g = this, command_context = g.__element.getElementsByClassName("command")[0], mute_context = g.__element.getElementsByClassName("mute")[0], bar_context = g.__element.getElementsByClassName("bar")[0], box_context = g.__element.getElementsByClassName("box")[0], filter_context = g.__element.getElementsByClassName("filter")[0], filter_type = $("select"), loop_context = g.__element.getElementsByClassName("loop")[0], loop = false, time_context = g.__element.getElementsByClassName("time")[0];
+        var g = this, command_context = g.__element.getElementsByClassName("command")[0], mute_context = g.__element.getElementsByClassName("mute")[0], bar_context = g.__element.getElementsByClassName("bar")[0], box_context = g.__element.getElementsByClassName("box")[0], filter_context = g.__element.getElementsByClassName("filter")[0], filter_type = $("select"), loop_context = g.__element.getElementsByClassName("loop")[0], loop = false, video = g.__element.getElementsByClassName("videoMP4")[0], time_context = g.__element.getElementsByClassName("time")[0];
         bar_context.value = 0;
         return new RSVP.Queue().push(function() {
             set.call(g, g.url);
@@ -246,6 +246,12 @@
                     g.video.play();
                 }
                 command_context.innerHTML = "stop";
+            }), loopEventListener(video, "dblclick", false, function(event) {
+                if (document.webkitIsFullScreen) {
+                    document.webkitCancelFullScreen();
+                } else {
+                    video.webkitRequestFullScreen();
+                }
             }), loopEventListener(bar_context, "mousemove", false, function(event) {
                 var time = getTime(bar_context, event.clientX);
                 box_context.style.left = (event.clientX - 20) / 16 + "em";

dev/audioplayer_control/index.html

@@ -47,7 +47,7 @@
 
 
     <div id="video">
-      <video id="videoControl">
+      <video id="videoControl" class="videoMP4">
         <type="video/mp4">
           Your browser does not support the video tag.
       </video>

src/audioplayer_control/control.js

@@ -258,6 +258,7 @@
         filter_type = $('select'),
         loop_context = g.__element.getElementsByClassName("loop")[0],
         loop = false,
+        video = g.__element.getElementsByClassName("videoMP4")[0],
         time_context = g.__element.getElementsByClassName("time")[0];
       bar_context.value = 0;
       return new RSVP.Queue()
@@ -332,6 +333,14 @@
               }
               command_context.innerHTML = "stop";
             }),
+            loopEventListener(video, "dblclick", false, function (event) {
+              if (document.webkitIsFullScreen) {
+                document.webkitCancelFullScreen();
+              } else {
+                video.webkitRequestFullScreen();
+              }
+            }),
+
 
             loopEventListener(bar_context, "mousemove",
                               false, function (event) {

src/audioplayer_control/control.less

@@ -17,7 +17,9 @@ canvas#can{
    height: 20%; 
 }
 
-
+ video::-webkit-media-controls-enclosure {
+            display: none !important;
+}
 progress.bar {
     position: inherit;
     display: block;

src/audioplayer_control/index.html

@@ -47,7 +47,7 @@
 
 
     <div id="video">
-      <video id="videoControl">
+      <video id="videoControl" class="videoMP4">
         <type="video/mp4">
           Your browser does not support the video tag.
       </video>