Build with UniplayOS

Quickstart

Clone the repo, install dependencies, run the dev server.

# clone and install
git clone https://github.com/unitedevz/uniplayOs.git
cd uniplayOs
npm install

# start the dev server on :3000
npm run dev

Then open http://localhost:3000/player.html?url=https://example.com/video.mp4 to test a direct link, or /test.html to inspect how any URL resolves before wiring it up.

Resolver

Every URL passed to the player goes through Resolver.resolve(url) first. It looks at the URL, decides what kind of media it is, and picks a playback strategy plus a fallback chain to try if that strategy fails.

const resolver = new Resolver({ proxyBase: '/proxy' });

const result = resolver.resolve('https://cdn.example.com/stream.m3u8');

console.log(result.type);            // 'hls'
console.log(result.strategy);        // 'hls'
console.log(result.proxyRequired);   // true
console.log(result.fallbackChain);   // ['hls', 'proxy', 'mp4-fallback']

What resolve() returns

Proxy Endpoint

When a source needs to be proxied, the player requests it through /proxy instead of fetching it directly. This is what lets UniplayOS sidestep CORS and hotlink protection on the source, and forwards range requests so seeking still works.

fetch('/proxy?url=' + encodeURIComponent('https://cdn.example.com/clip.mp4'), {
  headers: { Range: 'bytes=0-' }
});

Behavior

Player Params

The player at /player.html reads its source straight from the query string, so it can be deep-linked without any JavaScript.

Embed Script

Drop the embed script into any page and point it at a container element. It mounts an iframe running the UniplayOS player and talks to it over postMessage.

<div id="player" style="width:800px;height:450px;"></div>

<script type="module">
  import UniplayOS from "https://www.uniplayos.web.id/embed.js";

  const player = new UniplayOS({
    container: "#player",
    source: "https://example.com/video.mp4",
    autoplay: false,
    debug: false,
    onReady() { console.log("ready"); },
    onPlay() { console.log("playing"); },
    onError(err) { console.error(err); }
  });
</script>

Constructor Options

Events

Pass any of these as callbacks in the constructor. Each fires from a postMessage the player sends back to the parent page.

Instance Methods

Once you hold a reference to the player instance, drive it programmatically.

player.play();
player.pause();
player.togglePlay();
player.seek(30);
player.setVolume(0.5);
player.toggleMute();
player.toggleFullscreen();
player.load('https://example.com/next.mp4');
player.destroy();

Supported Formats

Environment