Pull in the manifest and segment parsing to the example page

The example page is very ugly but attempts to play two segments of bip-bop. The first segment plays fine but the player seems to jump to the end of the second segment after the first one finishes. Add bip bop test fixtures.

@@ -38,13 +38,23 @@
 
   <!-- Media Sources plugin -->
   <script src="libs/videojs-media-sources.js"></script>
+
   <!-- HLS plugin -->
   <script src="src/video-js-hls.js"></script>
+
+  <!-- segment handling -->
   <script src="src/flv-tag.js"></script>
   <script src="src/exp-golomb.js"></script>
   <script src="src/h264-stream.js"></script>
   <script src="src/aac-stream.js"></script>
   <script src="src/segment-parser.js"></script>
+  <script src="src/segment-controller.js"></script>
+
+  <!-- m3u8 handling -->
+  <script src="src/m3u8/m3u8.js"></script>
+  <script src="src/m3u8/m3u8-parser.js"></script>
+  <script src="src/m3u8/m3u8-tag-types.js"></script>
+  <script src="src/manifest-controller.js"></script>
   
   <!-- example MPEG2-TS segments -->
   <!-- bipbop -->
@@ -61,35 +71,55 @@
          controls>
   </video>
   <script>
-    var video, mediaSource;
+    var video, mediaSource, manifester;
 
     // initialize the player
     videojs.options.flash.swf = "libs/video-js.swf";
     video = videojs('video');
 
-    // create a media source
-    mediaSource = new videojs.MediaSource();
+    // get the manifest
+    manifester = new videojs.hls.ManifestController();
+    manifester.loadManifest('test/fixtures/prog_index.m3u8', function(manifest) {
+      var segmenter = new videojs.hls.SegmentController();
+      segmenter.loadSegment('test/fixtures/' + manifest.mediaItems[0].url, function(response) {
+        var segment = response.whatever;
+    
+        // create a media source
+        mediaSource = new videojs.MediaSource();
+        mediaSource.addEventListener('sourceopen', function(event){
+          var parser;
 
-    mediaSource.addEventListener('sourceopen', function(event){
-      var parser;
+          // feed parsed bytes into the player
+          var sourceBuffer = mediaSource.addSourceBuffer('video/flv; codecs="vp6,aac"');
+          parser = new videojs.hls.SegmentParser();
+          sourceBuffer.appendBuffer(parser.getFlvHeader(), video);
 
-      // feed parsed bytes into the player
-      var sourceBuffer = mediaSource.addSourceBuffer('video/flv; codecs="vp6,aac"');
-      parser = new videojs.hls.SegmentParser();
-      sourceBuffer.appendBuffer(parser.getFlvHeader(), video);
+          parser.parseSegmentBinaryData(segment);
 
-      parser.parseSegmentBinaryData(window.bcSegment);
+          while (parser.tagsAvailable()) {
+           sourceBuffer.appendBuffer(parser.getNextTag().bytes, video);
+          }
+          
+          segmenter.loadSegment('test/fixtures/' + manifest.mediaItems[1].url, function(response) {
+            var
+              segment = response.whatever,
+              parser = new videojs.hls.SegmentParser();
+            
+            parser.parseSegmentBinaryData(segment);
 
-      while (parser.tagsAvailable()) {
-       sourceBuffer.appendBuffer(parser.getNextTag().bytes, video);
-      }
-    }, false);
+            while (parser.tagsAvailable()) {
+              sourceBuffer.appendBuffer(parser.getNextTag().bytes, video);
+            }
+          });
+        }, false);
 
-    url = videojs.URL.createObjectURL(mediaSource);
+        url = videojs.URL.createObjectURL(mediaSource);
   
-    video.src({ 
-      src: url, 
-      type: "video/flv"
+        video.src({ 
+          src: url, 
+          type: "video/flv"
+        });
+      });
     });
   </script>
 </body>

@@ -48,4 +48,4 @@
 			}
 		};
 	}
-})(this);
\ No newline at end of file
+})(this);

@@ -22,13 +22,22 @@
 			self.onUpdateCallback = onUpdateCallback;
 			self.requestTimestamp = new Date().getTime();
 
-			vjs.get(segmentUrl, self.onSegmentLoadComplete, self.onSegmentLoadError);
+                        var req = new XMLHttpRequest();
+                        req.open('GET', segmentUrl, true);
+                        req.responseType = 'arraybuffer';
+                        req.onload = function(response) {
+                          self.onSegmentLoadComplete(new Uint8Array(req.response));
+                        };
+                  
+                  req.send(null);
 		};
 
 		self.parseSegment = function ( incomingData ) {
 			// Add David's code later //
 
-			self.data = {};
+			self.data = {
+                          whatever: incomingData
+                        };
 			self.data.url = self.url;
 			self.data.isCached = false;
 			self.data.requestTimestamp = self.requestTimestamp;

+#EXTM3U
+#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
+prog_index.m3u8

+#EXTM3U
+#EXT-X-TARGETDURATION:10
+#EXT-X-MEDIA-SEQUENCE:0
+#EXTINF:10, no desc
+fileSequence0.ts
+#EXTINF:10, no desc
+fileSequence1.ts
+#EXT-X-ENDLIST