@videohati/player

Framework-free web player for Videohati HLS streams. Arabic-first RTL UI, session-bound playback with a 15 s heartbeat, AES-128 key fetch over the Videohati playback protocol, and a Level 2 dynamic canvas watermark. A deterrent, not DRM.

Quickstart (script tag)

Create a playback session server-side (your API key must never reach the browser):

curl -X POST https://api.videohati.com/v1/playback/sessions \
  -H "Authorization: Bearer vh_live_..." \
  -H "content-type: application/json" \
  -d '{"videoId":"<video_id>","watermarkText":"Ahmed K."}'
# → { "sessionId": ..., "sessionToken": ..., ... }

Hand the sessionToken to the page:

<script src="https://cdn.videohati.com/player.js" async></script>
<div
  data-videohati-session-token="<sessionToken>"
  data-videohati-autoplay="muted"
  data-videohati-width="640"
  data-videohati-height="360"
  data-videohati-lang="ar"
></div>

Optional: data-videohati-api-origin="https://api.staging.videohati.com" points the player at a non-production API (local tunnels, staging). Without it the build-time default origin is used.

The player auto-mounts on every [data-videohati-session-token] element — the token alone identifies the session, video, and project. With an empty token it refuses to instantiate and shows "Missing session token".

Imperative API (npm)

npm install @videohati/player

import { Videohati } from "@videohati/player";

const p = Videohati.create({
  target: document.querySelector("#player")!,
  sessionToken,
  lang: "en",
});
p.play();
p.seek(30);
p.setQuality("720p"); // or "auto"
p.setLanguage("ar");
p.on("state", (s) => console.log(s));
p.destroy();

Behaviour notes

• Languages: ar (default, RTL) and en (LTR). Toggle at runtime with setLanguage.
• Keyboard: Space play/pause · ←/→ seek 5 s · Shift+←/→ 10 s · F fullscreen · M mute · ↑/↓ volume.
• Persistence: volume and last position are stored in localStorage under videohati:-prefixed keys per (projectId, videoId).
• Quality & speed: both live in the settings popover (gear). The quality list shows currently playable renditions plus Auto; while encoding is still in flight it refreshes as new renditions appear.
• Chrome: controls auto-hide after ~2.6 s during playback (always visible while paused, hovered, or the menu is open). Touch: tap toggles the chrome, double-tap on the outer thirds seeks ±10 s. prefers-reduced-motion disables the fades.
• Watermark: opt-in per session — pass watermarkText when creating the playback session to render it as the overlay; omit it for watermark-free playback. While active the overlay is required: removing, hiding, or replacing it pauses playback within 2 seconds.
• Heartbeat: every 15 s. If the session is revoked (concurrent-session cap, expiry) or the network is gone for ~90 s, playback pauses with a fixed explanatory overlay.
• Fonts: the player uses Sora / Tajawal (the videohati.com type system) when the host page loads them, falling back to system fonts. It never injects fonts.

Content Security Policy

Allow the player's two origins in connect-src (and media-src for blob URLs used by MSE):

connect-src https://api.videohati.com https://cdn.videohati.com;
media-src blob:;
script-src https://cdn.videohati.com;