MSE Safari - Play

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 sourceBuffer;
    var segments = [];
    var ms = new MediaSource();
    var file;
    var video = document.querySelector('video');
    
    video.muted = true;
    video.loop = true;
    video.autoplay = true;
    video.playsinline = true;
    video.preload = 'auto';
    video.src = window.URL.createObjectURL(ms);
    
    ms.addEventListener('sourceopen', onMediaSourceOpen);

    getData('uhd_dash.mpd');

    function videoInit(initBytes) {
      sourceBuffer.appendBuffer(initBytes);
      video.play();
      video.playbackRate = 60;
    }

    function onMediaSourceOpen() {
      sourceBuffer = ms.addSourceBuffer('audio/mpeg'); // Major hack to trick Safari into setting m_shouldGenerateTimestamps
      sourceBuffer.mode = 'sequence';
  	}

    function getData(url) {
      if (url !== "") {
        url = "https://files.panomoments.com/" + url;
        var xhr = new XMLHttpRequest(); // Set up xhr request
        xhr.open("GET", url, true); // Open the request
        xhr.responseType = "text"; // Set the type of response expected
        xhr.send();

        //  Asynchronously wait for the data to return
        xhr.onreadystatechange = function() {
          if (xhr.readyState == xhr.DONE) {
            var tempoutput = xhr.response;
            var parser = new DOMParser(); //  create a parser object

            // Create an xml document from the .mpd file for searching
            var xmlData = parser.parseFromString(tempoutput, "text/xml", 0);

            // Get and display the parameters of the .mpd file
            getFileType(xmlData);
          }
        }

        //  Report errors if they happen during xhr
        xhr.addEventListener("error", function(e) {
          console.log("Error: " + e + " Could not load url.");
        }, false);
      }
    }
    // retrieve parameters from our stored .mpd file
    function getFileType(data) {
      try {
        file = data.querySelectorAll("BaseURL")[0].textContent.toString();
        var rep =...