johanbrook/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MediaSource</title>
  </head>
  <body>
    <video id="video"></video>

    <script type="text/javascript">
      const video = document.getElementById('video');
      const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

      const urls = [
        '/screen1.m4v'
      ];

      if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        const 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);
        const mediaSource = this;
        const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

        fetchAB(urls[0]).then(buf => {
          sourceBuffer.addEventListener('updateend', () => {
            console.log(mediaSource.readyState);
            mediaSource.endOfStream();
            video.play();
          });

          if(!sourceBuffer.updating) {
            sourceBuffer.appendBuffer(buf);
          }
        })
        .catch(err => console.error(err));
      }

      function fetchAB (url) {
        console.log('fetching', url);
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest;
          xhr.open('get', url, true);
          xhr.responseType = 'arraybuffer';

          xhr.onload = () =>
            resolve(xhr.response);

          xhr.onerror = (err) =>
            reject(err);

          xhr.send();
        });
      };
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>MediaSource</title>
	</head>
	<body>
	<video id="video"></video>

	<script type="text/javascript">
	const video = document.getElementById('video');
	const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

	const urls = [
	'/screen1.m4v'
	];

	if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
	const 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);
	const mediaSource = this;
	const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

	fetchAB(urls[0]).then(buf => {
	sourceBuffer.addEventListener('updateend', () => {
	console.log(mediaSource.readyState);
	mediaSource.endOfStream();
	video.play();
	});

	if(!sourceBuffer.updating) {
	sourceBuffer.appendBuffer(buf);
	}
	})
	.catch(err => console.error(err));
	}

	function fetchAB (url) {
	console.log('fetching', url);
	return new Promise((resolve, reject) => {
	const xhr = new XMLHttpRequest;
	xhr.open('get', url, true);
	xhr.responseType = 'arraybuffer';

	xhr.onload = () =>
	resolve(xhr.response);

	xhr.onerror = (err) =>
	reject(err);

	xhr.send();
	});
	};
	</script>
	</body>
	</html>