yunnysunny/bufferAll.html

## bufferAll.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <video controls></video>
    <script>
      var video = document.querySelector('video');

      var assetURL = 'http://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4';
      // Need to be specific for Blink regarding codecs
      // ./mp4info frag_bunny.mp4 | grep Codec
      var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

      if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        var mediaSource = new MediaSource;
        //console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
      } else {
        console.error('Unsupported MIME type or codec: ', mimeCodec);
      }

      function sourceOpen (_) {
        //console.log(this.readyState); // open
        var mediaSource = this;
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        fetchAB(assetURL, function (buf) {
          sourceBuffer.addEventListener('updateend', function (_) {
            mediaSource.endOfStream();
            video.play();
            //console.log(mediaSource.readyState); // ended
          });
          sourceBuffer.appendBuffer(buf);
        });
      };

      function fetchAB (url, cb) {
        console.log(url);
        var xhr = new XMLHttpRequest;
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
          cb(xhr.response);
        };
        xhr.send();
      };
    </script>
  </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	</head>
	<body>
	<video controls></video>
	<script>
	var video = document.querySelector('video');

	var assetURL = 'http://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4';
	// Need to be specific for Blink regarding codecs
	// ./mp4info frag_bunny.mp4 \| grep Codec
	var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

	if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
	var mediaSource = new MediaSource;
	//console.log(mediaSource.readyState); // closed
	video.src = URL.createObjectURL(mediaSource);
	mediaSource.addEventListener('sourceopen', sourceOpen);
	} else {
	console.error('Unsupported MIME type or codec: ', mimeCodec);
	}

	function sourceOpen (_) {
	//console.log(this.readyState); // open
	var mediaSource = this;
	var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
	fetchAB(assetURL, function (buf) {
	sourceBuffer.addEventListener('updateend', function (_) {
	mediaSource.endOfStream();
	video.play();
	//console.log(mediaSource.readyState); // ended
	});
	sourceBuffer.appendBuffer(buf);
	});
	};

	function fetchAB (url, cb) {
	console.log(url);
	var xhr = new XMLHttpRequest;
	xhr.open('get', url);
	xhr.responseType = 'arraybuffer';
	xhr.onload = function () {
	cb(xhr.response);
	};
	xhr.send();
	};
	</script>
	</body>
	</html>