add video control with media source extensions

src/audioplayer_video_control/control.js

+/*global window, rJS, RSVP, console, URL, Math, parseInt, document, jIO,
+  Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array,
+  Audio, loopEventListener, jQuery, promiseEventListener, Blob*/
+/*jslint nomen: true, maxlen:180 */
+
+(function (window, rJS, RSVP, loopEventListener, $, promiseEventListener) {
+  "use strict";
+  var gk = rJS(window),
+    MediaSource = window.MediaSource || window.WebKitMediaSource;
+  gk.declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
+    .declareAcquiredMethod("jio_get", "jio_get")
+    .declareAcquiredMethod("jio_remove", "jio_remove")
+    .declareAcquiredMethod("plSave", "plSave")
+    .declareAcquiredMethod("plGive", "plGive")
+    .declareAcquiredMethod("displayThisPage", "displayThisPage")
+    .declareAcquiredMethod("displayThisTitle", "displayThisTitle")
+    .declareAcquiredMethod("allDocs", "allDocs")
+    .declareAcquiredMethod("plEnablePage", "plEnablePage")
+    .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
+    .declareMethod("render", function (options) {
+      var g = this;
+      if (options.id) {
+        return new RSVP.Queue()
+          .push(function () {
+            return g.jio_getAttachment({"_id" : options.id,
+                                        "_attachment" : "enclosure" });
+          })
+          .push(function (blob) {
+            g.sourceBuffer = g.mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
+            g.blob = blob;
+            g.size = 0;
+            g.step =  Math.ceil(blob.size / 16);
+            blob = blob.slice(0, g.step);
+            g.size += g.step;
+            return jIO.util.readBlobAsArrayBuffer(blob).then(function (e) {
+              g.sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
+              g.video.play();
+            });
+          })
+          .push(undefined, function (error) {
+            if (!(error instanceof RSVP.CancellationError)) {
+              window.location = g.__element
+                .getElementsByClassName("next")[0].href;
+              if ((error.status === 404)
+                  && (error.method === "getAttachment")) {
+                return g.jio_remove({"_id" : error.id});
+              }
+            }
+          });
+      }
+    })
+    .declareMethod("startService", function () {
+      var g = this,
+        video = g.__element.getElementsByClassName("videoMP4")[0];
+      g.video.play();
+      return new RSVP.Queue()
+        .push(function () {
+          return RSVP.any([
+            loopEventListener(video, "progress", false, function () {
+              var blob;
+              if (g.size >= g.blob.size) {
+                g.mediaSource.endOfStream();
+                return;
+              }
+              if (g.size + g.step < g.blob.size) {
+                blob = g.blob.slice(g.size, g.size + g.step);
+              } else {
+                blob = g.blob.slice(g.size);
+              }
+              g.size += g.step;
+              return jIO.util.readBlobAsArrayBuffer(blob).then(
+                function (e) {
+                  return g.sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
+                }
+              );
+            })
+          ]);
+        });
+    });
+  gk.ready(function (g) {
+    g.video = g.__element.getElementsByTagName('video')[0];
+    g.mediaSource = new MediaSource();
+    g.video.src = URL.createObjectURL(g.mediaSource);
+  });
+}(window, rJS, RSVP, loopEventListener, jQuery, promiseEventListener));

src/audioplayer_video_control/control.less

+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;
+//    padding: 0.5em;
+    width:100%;
+    -moz-border-radius: 0.5em;
+    -webkit-border-radius: 0.5em;
+    border-radius: 0.5em;
+    -moz-box-shadow: 0 0.1em 0.5em #000 inset,0 0.1em 0 #444;
+    -webkit-box-shadow: 0 0.1em 0.5em #000 inset,0 0.1em 0 #444;
+    box-shadow: 0 0.1em 0.5em #000 inset,0 0.1em 0 #444;
+}
\ No newline at end of file

src/audioplayer_video_control/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>audio control</title>
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+  <script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
+
+    <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></script>
+
+    <script src="http://git.erp5.org/gitweb/dream.git/blob_plain/refs/heads/renderjs2:/dream/platform/src2/dream/mixin_promise.js" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="./control.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="./control.css" media="screen" ></link> 
+  </head>
+  <body>
+
+    <div id="video" >
+      <video id="videoControl" class="videoMP4" controls>
+        <type="video/mp4">
+          Your browser does not support the video tag.
+      </video>
+    </div>
+
+    <!-- data-position="fixed" -->
+    <div data-role="footer" data-position="fixed" data-theme="b">
+      <div data-role="navbar">
+        <ul>
+          <li><a data-role="button" class="mute" data-icon="info" >mute off</a></li>
+          <li><a data-role="button" class="command" data-icon="gear">stop</a></li>
+          <li><a data-role="button" class="next" data-icon="arrow-r">next(random)</a></li>
+          <li><a data-role="button" class="share" data-icon="star" target="_blank">share</a></li>
+        </ul>
+      </div><!-- /navbar -->
+    </div><!-- /footer -->
+  </body>
+</html>