parts.html 4.52 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>

  <script>
    window.videojs = window.videojs || {
      Hls: {}
    };
  </script>
  <!--<script src="min-m4s.js"></script>-->
  <script src="./js/mdat.js"></script>
  <script src="../../src/mp4-generator.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">Transmux Analyzer</h1>
    </header>
  </div>

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

      <article>
        <header>
          <p>
            This page will show a video player that loads a header of an mp4 followed by an mp4 segment.
          </p>
        </header>
        <section>
            <video controls autoplay width="320" height="240"></video>
         </section>
      </article>

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

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





    <script>
        var ms,
            sourceBuffer,
            video;

        function closed() {
            console.log("MediaSource Closed.");
        }

        var done = false;
        function loadFragment() {
          if (done) {
            return;
          }

          console.log("LOAD FRAGMENT");

          var moov = videojs.mp4.moov(100, 600, 300, "video");
          var moof = videojs.mp4.moof([{trackId: 1}]);
          var frag = Array.prototype.slice.call(moov);
              frag = frag.concat(Array.prototype.slice.call(moof));
              frag = frag.concat(Array.prototype.slice.call(mdat));



          sourceBuffer.appendBuffer( new Uint8Array( frag ) );
        
          done = true;

        }

        function loadMdat(){
            console.log('mdat', mdat);
            setTimeout( function(){
                sourceBuffer.appendBuffer(new Uint8Amdat);
            },0);

        }

        function loadInit() {
            console.log("LOAD INIT");
            var req = new XMLHttpRequest();
            req.responseType = "arraybuffer";
            req.open("GET", "./ts2/Header.m4s", true);

            req.onload = function() {
                console.log("INIT DONE LOADING");
                sourceBuffer.appendBuffer(new Uint8Array(req.response));
                sourceBuffer.addEventListener('update', loadFragment);
            };

            req.onerror = function () {
                window.alert("Could not load init.");
            };

            req.send();

        }

        function opened() {

            console.log("OPENED");
            sourceBuffer = ms.addSourceBuffer('video/mp4;codecs="avc1.42c00d"');

            sourceBuffer.addEventListener('updateend', console.log.bind(console));
            sourceBuffer.addEventListener('updatestart', console.log.bind(console));
            sourceBuffer.addEventListener('update', console.log.bind(console));
            loadInit();
        }

        function load() {
            console.log("START");
            window.MediaSource = window.MediaSource || window.WebKitMediaSource;

            ms = new window.MediaSource();

            video = document.querySelector('video');
            video.src = window.URL.createObjectURL(ms);

            ms.addEventListener('webkitsourceopen', opened, false);
            ms.addEventListener('webkitsourceclose', closed, false);

            ms.addEventListener('sourceopen', opened, false);
            ms.addEventListener('sourceclose', closed, false);

            ms.addEventListener('update', console.log.bind(console));
            ms.addEventListener('updateend', console.log.bind(console));
        }
        load();
    </script>
</body>
</html>