JSFiddle - React, Tailwind, and code Playground

by psayre23

HTML

<video controls="controls"></video>

JavaScript

var segmentTypeURLs = getSegmentTypeURLs();

// Bind video events
var video = document.querySelector('video');
var ms = new MediaSource();
video.src = URL.createObjectURL(ms);
video.addEventListener('timeupdate', function() {
  console.log('timeupdate', video.currentTime);
});

// Create buffers
ms.addEventListener('sourceopen', function () {
  if (ms.readyState !== 'open') {
    return;
  }
  video.play();
  setTimeout(function () {
    video.play();
  }, 1000);
  
  var mimeTypes = Object.keys(segmentTypeURLs);
  mimeTypes.map(function (mimeType) {
		var segmentURLs = segmentTypeURLs[mimeType].slice();
    var sb = ms.addSourceBuffer(mimeType);
    var initSegmentURL = segmentURLs.shift();
    var firstSegmentURL = segmentURLs.shift();
    fetchAllSegments([initSegmentURL, firstSegmentURL], function (error, segments) {
    	var initSegment = segments[0];
      var firstSegment = segments[1];
      sb.addEventListener('updateend', function () {
        if (ms.readyState !== 'open') {
          return;
        }
        if (firstSegment) {
          sb.appendBuffer(firstSegment);
          firstSegment = null;
        } else {
          var url = segmentURLs.shift();
          if (url) {
            fetchSegment(url, function (error, segment) {
              sb.appendBuffer(segment);
            });
          }
        }
      });
      sb.appendBuffer(initSegment);
    });
  });
});






function fetchSegmentTypes(segmentTypeURLs, done) {
	var results = [];
  var mimeTypes = Object.keys(segmentTypeURLs);
	(function next(index) {
  	var mimeType = mimeTypes[index];
		if (!mimeType) {
    	console.log('Fetched all types', results);
    	return done(null, results);
		}
    fetchAllSegments(segmentTypeURLs[mimeType], function (error, segments) {
      if (error) {
        return done(error);
      }
      results[index] = {
      	mimeType: mimeType,
        segments: segments,
      };
      next(index + 1);
    });
  })(0);
}

function fetchAllSegments(files,...