player.html 3.53 KB
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="css/normalize.min.css">
  <link rel="stylesheet" href="css/main.css">

  <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <!--[if lt IE 7]>
      <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
      <![endif]-->

  <div class="header-container">
    <header class="wrapper clearfix">
      <h1 class="title">MP4 Media Sources API Test</h1>
    </header>
  </div>

  <div class="main-container">
    <div class="main wrapper clearfix">

      <article>
        <header>
          <p>
            This page is used to demo the playing of an mp4 file via the mediaSources API
          </p>
        </header>
        <section>
          <h2>Inputs</h2>
          <form id="inputs">
            <label>
              Your original MP2T segment:
              <input type="file" id="original">
            </label>
            <label>
              A working, MP4 version of the underlying stream
              produced by another tool:
              <input type="file" id="working">
            </label>
          </form>
        </section>
        <section>

        <video controls width="320" height="240">>
          <source src="sintel_trailer-480p.mp4" type="video/mp4">
          Your browser does not support the <code>video</code> element.
        </video>
        </section>
      </article>

    </div> <!-- #main -->
  </div> <!-- #main-container -->

  <div class="footer-container">
    <footer class="wrapper">
      <h3></h3>
    </footer>
  </div>

<script>
    var inputs = document.getElementById('inputs'),
        original = document.getElementById('original'),
        working = document.getElementById('working'),

        video = document.createElement('video');


    working.addEventListener('change', function() {
      console.log('File Selectd');
      var reader = new FileReader();
      reader.addEventListener('loadend', function() {
        console.log('File has been loaded');
        var bytes = new Uint8Array(reader.result),
            ms = new window.MediaSource(),
            video = document.querySelector('video');

        video.addEventListener("error", function onError(err) {
          console.dir("error", err, video.error);
        });

        video.pause();
        video.src = window.URL.createObjectURL(ms);

        var onMediaSourceOpen = function() {
          console.log('on media open');
          ms.removeEventListener('sourceopen', onMediaSourceOpen);
          var videoBuffer = ms.addSourceBuffer('video/mp4;codecs="avc1.4D400D"');
          videoBuffer.appendBuffer(bytes);

          var audioBuffer = ms.addSourceBuffer('audio/mp4;codecs=mp4a.40.2');
        };

        ms.addEventListener('sourceopen', onMediaSourceOpen);
        
        console.log('appended bytes', bytes);
      });
      reader.readAsArrayBuffer(this.files[0]);
    });

  </script>
 
</body>
</html>