Web quick start

OGPlayer for the web plays HLS through hls.js (with Safari’s native HLS as fallback) and renders its UI as a framework-agnostic <og-player> custom element — it works identically in plain HTML, React, Vue or Angular.

Option A · npm

npm install ogplayer

<og-player style="width:100%;aspect-ratio:16/9"></og-player>

<script type="module">
  import { OGPlayer } from "ogplayer";

  const player = new OGPlayer({ licenseKey: "OGP1…" }); // omit → watermarked trial
  document.querySelector("og-player").player = player;

  player.addListener({
    onStateChanged: (s) => console.log(s),
    onError: (e) => console.warn(e.code, e.message),
  });

  player.load({
    url: "https://example.com/stream.m3u8",
    title: "My movie",
    sideloadedSubtitles: [
      { url: "/subs/en.vtt", language: "en", label: "English", isDefault: true },
    ],
  });
</script>

Option B · script tag (no build step)

<script src="https://cdn.ogplayer.tv/<version>/ogplayer.global.js"></script>
<og-player id="pl" style="width:100%;aspect-ratio:16/9"></og-player>
<script>
  const player = new OGPlayerSDK.OGPlayer({ licenseKey: "OGP1…" });
  document.getElementById("pl").player = player;
  player.load({ url: "https://example.com/stream.m3u8" });
</script>

DRM

One DrmConfig covers all three browser DRM systems — the SDK engages whichever the visitor’s browser supports (Chrome/Firefox/Android → Widevine, Edge → PlayReady, Safari → FairPlay):

player.load({
  url: "https://example.com/protected.m3u8",
  drm: {
    widevine:  { licenseUrl: "https://drm.example.com/widevine" },
    playready: { licenseUrl: "https://drm.example.com/playready" },
    fairplay:  {
      licenseUrl: "https://drm.example.com/fairplay",
      certificateUrl: "https://drm.example.com/fairplay.cer",
    },
    tokenProvider: async ({ renewal }) => ({ "X-AxDRM-Message": await freshToken() }),
  },
});

Browser support

Evergreen Chrome / Edge / Firefox / Safari 16+ (desktop & mobile). Every API used (MSE, custom elements, shadow DOM, WebCrypto, Fullscreen) has been baseline for years; no polyfills.

Complete examples

Every guide in these docs has a matching page in the open-source web demos — npm install && npm start and lift code from there.