MSE Safari

by dustinkerstein

HTML

<video id="PanoMoment"></video>

CSS

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

#PanoMoment {
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var container, videoInitialized = false,
      videoSeeked = false,
      isUserInteracting = false;

    var sourceBuffer;
    var frameRate;
    var index = 0;
    var segments = [];
    var ms = new MediaSource();
    var videoBits, arrayOfBytes, chunk, file;

    var video = document.querySelector('video');
    video.muted = true;
    video.autoplay = true;
    video.playsinline = true;
    video.preload = 'auto';
    video.src = window.URL.createObjectURL(ms);
    ms.addEventListener('sourceopen', onMediaSourceOpen);

    getData('uhd_dash.mpd');
    
    document.addEventListener('keypress', onKey, false);

    function onKey (e) {
      var key = e.key;
      switch (key) {
          case "[":
              index = (index - 1) % segments.length;
              if (index < 0) index = segments.length -1;
              nextSegment(index);
              break;
          case "]":
              index = (index + 1) % segments.length;
              nextSegment(index);
              break;
          case "1":
              console.log(ms.sourceBuffers)
              break;
      }
    }

    function animate() {
      window.requestAnimationFrame(render);
    }

		var t0 = 0, t1 = 0;
    var seeking = false;
    
    function render() {
      window.requestAnimationFrame(render);
      /* t1 = t0;
      t0 = performance.now()
      console.log(t0-t1) */
      //if (!seeking || count <= 1) { // Hack for first frame not returning onSeek
        //console.log("render. count: " + count + " perf.now: " + performance.now() + " video.currentTime: " +  video.currentTime)
        //index = (index + 1) % segments.length;
        //nextSegment(index);
      //}

    }

    function videoInit(initBytes) {
      videoBits = initBytes;
      chunk = initBytes.slice(0, parseInt(segments[0].getAttribute("mediaRange").toString().split('-')[1]) + 1);
      //appendToBuffer(chunk);
      sourceBuffer.appendBuffer(chunk);
      animate();
/*       setInterval(function(){ 
       ...