Bring the player to your application

Orilla provides adaptive HLS playback through a player shared by the dashboard, React, the HTML element, and the hosted iframe. Content access depends on the playback ID’s public or signed policy.

Iframe: start in the dashboard

For a website that does not need to control the player through code, open Share & embed on a ready asset and copy the iframe. The dashboard lets you adjust autoplay, mute, loop, and start time.

Example structure; replace the domain and playback ID with those of your installation:

<iframe
  src="https://video.example/embed/PLAYBACK_ID"
  title="Video title"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
  style="width:100%;aspect-ratio:16/9;border:0"
></iframe>

This example assumes a public playback ID. For a signed one, use the authorized URL generated by your backend or dashboard, including its temporary credentials. An iframe does not make private content public.

The same dialog lets you share a clip with segment-aligned boundaries. Temporary access can be limited to the window; a public link’s query parameters do not prevent retrieval of the full video.

React

Install the React player from npm. React 19 is a peer dependency:

npm install @orilla-video/player react@^19 react-dom@^19

For local development, build and verify it from the repository:

pnpm build:player
pnpm check:player

You can install /path/to/repository/dist/player in a consuming application to use that local build.

import { OrillaPlayer } from "@orilla-video/player";
import "@orilla-video/player/style.css";

export function Video() {
  return (
    <OrillaPlayer
      descriptor={{
        playbackId: "PLAYBACK_ID",
        url: "https://video.example/stream/PLAYBACK_ID.m3u8",
        posterUrl: "https://video.example/image/PLAYBACK_ID/thumbnail.jpg",
      }}
    />
  );
}

The example uses public playback. For temporary URLs, the descriptor supports expiresAt and the component supports renew, a stable function that obtains new links from your backend and updates the descriptor. Keep the playback ID when renewing the same content.

HTML and languages

The <orilla-player> variant isolates its styles in Shadow DOM. The generated package includes the element entry point, styles, and declarations; see packages/player/README.md to load it and configure its properties.

The platform supports SRT/WebVTT subtitles, WebVTT chapters, and audio tracks in multiple languages. Each option depends on the asset’s ready resources. No artificial video track is added to audio-only sources.

Add SRT/WebVTT files or audio using track uploads. Each track is processed independently; wait until it is ready before looking for it in the menu.

Chapter keyboard navigation

When chapters are available, focus Chapters and press Space or Enter to open it. Tab to Go to chapter, then use the native arrow keys to choose a chapter. Escape closes the chapter selector and returns focus to Chapters.

Opening or closing chapters with the pointer preserves paused or playing intent. These chapter controls are locally validated in Chromium, Firefox and WebKit on Linux and await deployment. Desktop and narrow-viewport checks do not certify physical devices, screen readers or Safari on Apple platforms.

Behavior and compatibility

• Automatic quality adapts to the available renditions. Manual selection depends on the adapter and browser.
• Autoplay usually requires mute and depends on browser policies.
• Temporary links in an iframe pasted into another page do not renew automatically.
• Local chapter-control checks cover Chromium, Firefox and Linux WebKit. Broader player workflows, Safari on Apple platforms and physical devices require further validation.
• DRM and live video are not included.