Blame view

test/muxer/mse-demo.html 3.91 KB
David LaPalomento committed
1 2 3 4 5 6 7 8
<!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">
David LaPalomento committed
9
  <title>HLS Media Sources Demo</title>
David LaPalomento committed
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
  <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">
David LaPalomento committed
25
      <h1 class="title">Media Sources Demo</h1>
David LaPalomento committed
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
    </header>
  </div>

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

      <article>
        <header>
          <p>
            videojs-contrib-hls can convert MPEG transport streams
            into Media Source Extension-compatible media segments on
            the fly. Check out the demo below in Chrome!
          </p>
        </header>
        <section>
          <video id=demo width=640 height=360 controls>
            <p>
              Your browser is too old to view this demo. How about
              upgrading?
            </p>
          </video>
        </section>
      </article>

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

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


  <script src="zencoder-haze-1.js"></script>
  <!-- transmuxing -->
  <script>
    window.videojs = window.videojs || {
      Hls: {}
    };
  </script>
  <script src="../../src/stream.js"></script>
  <script src="../../src/mp4-generator.js"></script>
  <script src="../../src/transmuxer.js"></script>
  <script src="../../src/exp-golomb.js"></script>
  <script src="js/mp4-inspector.js"></script>

  <script src="../../src/bin-utils.js"></script>
  <script>
    var mediaSource = new MediaSource(),
        demo = document.getElementById('demo');

    // setup the media source
    mediaSource.addEventListener('sourceopen', function() {
79 80
      var videoBuffer = mediaSource.addSourceBuffer('video/mp4;codecs=avc1.4d400d'),
          audioBuffer = mediaSource.addSourceBuffer('audio/mp4;codecs=mp4a.40.2'),
David LaPalomento committed
81
          transmuxer = new videojs.mp2t.Transmuxer(),
82 83
          videoSegments = [],
          audioSegments = [];
David LaPalomento committed
84 85 86

      // expose the machinery for debugging
      window.vjsMediaSource = mediaSource;
87
      window.vjsSourceBuffer = videoBuffer;
David LaPalomento committed
88 89 90 91
      window.vjsVideo = demo;

      // transmux the MPEG-TS data to BMFF segments
      transmuxer.on('data', function(segment) {
92 93 94 95 96
        if (segment.type === 'video') {
          videoSegments.push(segment);
        } else {
          audioSegments.push(segment);
        }
David LaPalomento committed
97 98 99 100 101
      });
      transmuxer.push(hazeVideo);
      transmuxer.end();

      // buffer up the video data
102 103 104 105 106 107 108 109 110 111 112 113
      videoBuffer.appendBuffer(videoSegments.shift().data);
      videoBuffer.addEventListener('updateend', function() {
        if (videoSegments.length) {
          videoBuffer.appendBuffer(videoSegments.shift().data);
        }
      });

      // buffer up the audio data
      audioBuffer.appendBuffer(audioSegments.shift().data);
      audioBuffer.addEventListener('updateend', function() {
        if (audioSegments.length) {
          audioBuffer.appendBuffer(audioSegments.shift().data);
David LaPalomento committed
114 115 116 117 118 119 120 121
        }
      });
    });
    demo.src = URL.createObjectURL(mediaSource);
    demo.addEventListener('error', console.log.bind(console));
  </script>
</body>
</html>