title: Media Source Extensions Not Working
body: <p>I am trying to use the MediaSource API to append separate WebM videos to a single  source. </p>
  
  <p>I found a <a href="https://github.com/jbochi/media-source-playground" rel="nofollow noreferrer">Github project</a> that was attempting the same thing, where a playlist of WebMs is loaded, and each one is appended as a SourceBuffer. But it was last committed a year ago, and thus out-of-sync with the <a href="http://www.w3.org/TR/media-source/" rel="nofollow noreferrer">current spec</a>. So I <a href="https://github.com/hguiney/media-source-playground" rel="nofollow noreferrer">forked it</a> and updated to the latest API properties/methods, plus some restructuring. Much of the existing code was taken directly from the spec’s <a href="http://www.w3.org/TR/media-source/#examples" rel="nofollow noreferrer">examples</a> and <a href="https://html5-demos.appspot.com/static/media-source.html" rel="nofollow noreferrer">Eric Bidelman’s test page</a>.</p>
  
  <p>However, I can not get it to work as expected. I am testing in two browsers, both on Mac OS X 10.9.2: Chrome 35 stable (latest at the time of this writing), and Firefox 30 beta with the flag <code>media.mediasource.enabled</code> set to <code>true</code> in about:config (this feature will not be introduced until FF 25, and current stable is 24).</p>
  
  <p>Here are the problems I’m running into.</p>
  
  <h2>Both browsers</h2>
  
  <p>I want the video to be, in the end, one long video composed of the 11 WebMs (00.webm, 01.webm, …, 10.webm). Right now, each browser only plays 1 segment of the video.</p>
  
  <h2>Chrome</h2>
  
  <p>Wildly inconsistent behavior. Seems impossible to reproduce any of these bugs reliably.</p>
  
  <ul>
  <li>Sometimes the video is blank, or has a tall black bar in the middle of it, and is unplayable.</li>
  <li>Sometimes the video will load and pause on the first frame of 01.webm.</li>
  <li>Sometimes, the video will play a couple of frames of the 02.webm and pause, having only loaded the first three segments.</li>
  <li>The Play button is initially grayed out.</li>
  <li>Pressing the grayed out Play button produces wildly inconsistent behaviors. Sometimes, it loads a black, unplayable video. Other times, it will play the first segment, then, when you get to the end, it stops, and when you press Play/Pause again, it will load the next segment. Even then, it will sometimes skip over segments and gets stuck on 04.webm. Regardless, it never plays the final segment, even though the console will report going through all of the buffers.</li>
  </ul>
  
  <p>It is honestly different every time. I can’t list them all here.</p>
  
  <p><strong>Known caveats</strong>: Chrome does not currently implement <code>sourceBuffer.mode</code>, though I do not know what effect this might have.</p>
  
  <h2>Firefox</h2>
  
  <ol>
  <li>Only plays 00.webm. Total running time is 0:08, the length of that video. </li>
  <li>Video seeking does not work. (This may be expected behavior, as there is nothing actually happening in the onSeeking event handler.)</li>
  <li>Video can not be restarted once finished.</li>
  </ol>
  
  <p>My initial theory was that this had to do with <code>mediaSource.sourceBuffers[0].timestampOffset = duration</code> and <code>duration = mediaSource.duration</code>. But I can’t seem to get anything back from <code>mediaSource.duration</code> except for <code>NaN</code>, even though I’m appending new segments.</p>
  
  <p>Completely lost here. Guidance very much appreciated.</p>
  
  <p><strong>EDIT</strong>: I uncommented the duration parts of the code, and ran <code>mse_webm_remuxer</code> from <a href="https://github.com/acolwell/mse-tools" rel="nofollow noreferrer">Aaron Colwell's Media Source Extension Tools</a> (thanks <a href="https://stackoverflow.com/users/2601193/adam-hart">Adam Hart</a> for the tips) on all of the videos. Voila, no more unpredictable glitches in Chrome! But alas, it still pauses once a media segment ends, and even when you press play, it sometimes gets stuck on one frame.</p>
  
  <p>In Firefox Beta, it doesn’t play past the first segment, responding with:</p>
  
  <blockquote>
    <p>TypeError: Value being assigned to SourceBuffer.timestampOffset is not a finite floating-point value.</p>
  </blockquote>
  
  <p>Logging the value of <code>duration</code> returns <code>NaN</code> (but only in FF).</p>