Webleb - UI Elements - Unity Web Player: Five Nights at BIG E Loader

HTML CSS JS

<head>
    <base href="https://cdn.jsdelivr.net/gh/web-ports/fnae@afd4e5071add297d6169665a4f999d62f312532e/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity Web Player | Five Night's at BIG E</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
  </head>
  <body>
  <div id="loading-text"
    style="color: white; font-size: 48px; font-family: cursive; text-align: center; margin-top: 20px;"> LOADING...
  </div>
    <div id="unity-container">
      <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
    </div>
    <script>
var loadingText = document.querySelector("#loading-text");
    let totalBytes = 0;
    let loadedBytes = 0;

async function fetchWithProgress(url) {
      const response = await fetch(url);
      const reader = response.body.getReader();
      let chunks = [];
      let received = 0;
      while (true) {
        const {
          done,
          value
        } = await reader.read();
        if (done) break;
        received += value.length;
        loadedBytes += value.length;
        chunks.push(value);
        let mbDone = (loadedBytes / (1024 * 1024)).toFixed(2);
        let mbTotal = '139.53';
        loadingText.textContent = `LOADING... ${mbDone} MB / ${mbTotal} MB`;
      }
      let fullBuffer = new Uint8Array(received);
      let offset = 0;
      for (let chunk of chunks) {
        fullBuffer.set(chunk, offset);
        offset += chunk.length;
      }
      return fullBuffer.buffer;
    }

async function mergeFiles(fileParts, cacheKey) {
      const buffers = await Promise.all(
        fileParts.map(part => fetchWithProgress(part))
      );
      const mergedBlob = new Blob(buffers);
      return URL.createObjectURL(mergedBlob);
    }

function getParts(file, start, end) {
      let parts = [];
      for (let i = start; i <= end; i++) {
        parts.push(file + ".part" + i);
      }
      return parts;
    }
    (async () => {
      const [dataUrl, wasmUrl, webm] = await Promise.all([
        mergeFiles(getParts("Build/fnae.data", 1, 3), "fnae.data"),
        mergeFiles(getParts("Build/fnae.wasm", 1, 2), "fnae.wasm"),
        mergeFiles(getParts("StreamingAssets/202512191935.webm", 1, 3), "202512191935.webm"),
      ]);

window.randomwebm = webm;
const realSrc = Object.getOwnPropertyDescriptor(
  HTMLMediaElement.prototype,
  "src"
);

Object.defineProperty(HTMLMediaElement.prototype, "src", {
  set(value) {
    if (typeof value === "string" && value.includes("202512191935.mp4")) {
      value = window.randomwebm;
    }
    return realSrc.set.call(this, value);
  },
  get() {
    return realSrc.get.call(this);
  }
});

var container = document.querySelector("#unity-container");
      var canvas = document.querySelector("#unity-canvas");
      var loadingBar = document.querySelector("#unity-loading-bar");
      var progressBarFull = document.querySelector("#unity-progress-bar-full");
      var warningBanner = document.querySelector("#unity-warning");

function unityShowBanner(msg, type) {

}

var buildUrl = "Build";
      var loaderUrl = buildUrl + "/fnae.loader.js";
      var config = {
        arguments: [],
        dataUrl: dataUrl,
        frameworkUrl: buildUrl + "/fnae.framework.js",
        codeUrl: wasmUrl,
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "fnae",
        productVersion: "1.0",
        showBanner: unityShowBanner,
      };

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
        document.getElementsByTagName('head')[0].appendChild(meta);
      }

loadingBar.style.display = "block";

Preview

Open Advanced Editor Full Screen

HTML CSS JS

window.randomwebm = webm;
const realSrc = Object.getOwnPropertyDescriptor(
  HTMLMediaElement.prototype,
  "src"
);

function unityShowBanner(msg, type) {

}

loadingBar.style.display = "block";

Preview

Validating your code, please wait...