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 appendedSegments = [];
    var ms = new MediaSource();
    var videoBits, arrayOfBytes, chunk, file;

    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(ms);
    ms.addEventListener('sourceopen', onMediaSourceOpen);

    getData('hd_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 "-":
              index = (index - 2) % segments.length;
              if (index < 0) index = segments.length -1;
              nextSegment(index);
              break;
          case "=":
              index = (index + 2) % segments.length;
              nextSegment(index);
              break;    
      }
    }

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

    function render() {
      window.requestAnimationFrame(render);
      /* if (video.readyState === video.HAVE_ENOUGH_DATA) {
        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);
      animate();
    }

    function onMediaSourceOpen() {
      sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.640033"');
      //sourceBuffer = ms.addSourceBuffer('audio/mpeg');
      //sourceBuffer.mode = 'sequence';
   ...