media/test/data/media_source_player.html

<!DOCTYPE html>
<html>
  <head>
    <title>Media Source Player</title>
  </head>
  <body onload="runTest();">
    <video controls></video>
    <script src='eme_player_js/app_loader.js' type='text/javascript'></script>
    <script type="text/javascript">
      var video = document.querySelector('video');

      function onTimeUpdate() {
        video.removeEventListener('timeupdate', onTimeUpdate);
        video.currentTime =  0.9 * video.duration;
      }

      function onSeeked() {
        video.removeEventListener('ended', Utils.failTest);
        Utils.installTitleEventHandler(video, 'ended');
      }

      // For those streams whose start time is greater than
      // kSeekToStartFudgeRoom defined in source_buffer_stream.cc, we
      // need to skip those time range. Otherwise it won't play
      function onLoadedMetaData() {
        var buf = video.buffered;
        if (buf.length > 0) {
          video.currentTime = buf.start(0);
        }
      }

      // The test completes after media starts playing, seeks to 0.9 of
      // duration and fires the ended event.
      // The test stops when an error or ended event fire unexpectedly.
      function runTest() {
        var testConfig = new TestConfig();
        testConfig.loadQueryParams();
        Utils.installTitleEventHandler(video, 'error');
        video.addEventListener('ended', Utils.failTest);
        video.addEventListener('seeked', onSeeked);
        video.addEventListener('timeupdate', onTimeUpdate);
        video.addEventListener('loadedmetadata', onLoadedMetaData);
        var source = MediaSourceUtils.loadMediaSourceFromTestConfig(testConfig);
        video.src = window.URL.createObjectURL(source);
        video.play();
      }
    </script>
  </body>
</html>