chorki-player-sdk

React video player for Chorki Bytes. Pass it a video API URL and it fetches the video, then plays it with Shaka Player. Pre-, mid- and post-roll Google IMA advertisements (VMAP/VAST) come from the video's ad campaign.

• One prop to play a video: src = the full video API URL
• Sized to the video's native resolution by default, and never wider than its parent
• width / height override the size; the aspect ratio is kept when you give only one
• Ads with an "Ad in Ns" countdown, ±10 s seek buttons and ←/→ keys, quality, captions, speed, picture-in-picture and fullscreen
• Safe for server rendering (Next.js): the player only loads in the browser

Install

npm install chorki-player-sdk

Requires react and react-dom 17 or newer.

Usage

import { ChorkiPlayer } from 'chorki-player-sdk';
import 'chorki-player-sdk/style.css'; // once, anywhere in your app

export default function Page() {
  return <ChorkiPlayer src="https://api.example.com/v1/videos/your-video-slug" />;
}

Replace the example URL with your Chorki Bytes API base URL and the video's slug: {API_BASE}/v1/videos/{slug}.

Sizing

// Default: the video's native size (e.g. 1280×720), shrinking to fit a narrower parent
<ChorkiPlayer src={url} />

// Fixed width; height follows the video's aspect ratio
<ChorkiPlayer src={url} width={800} />

// Fill the parent's width
<ChorkiPlayer src={url} width="100%" />

// Fixed height; width follows the aspect ratio
<ChorkiPlayer src={url} height={360} />

// Both: an exact box, with the video letterboxed inside it
<ChorkiPlayer src={url} width="100%" height="60vh" />

Numbers are pixels. Strings can be any CSS length.

Next.js

The bundle is marked 'use client', so you can render <ChorkiPlayer /> straight from a Server Component. Import the stylesheet in app/layout.js (App Router) or pages/_app.js (Pages Router).

Props

| Prop | Type | Default | Description | |---|---|---|---| | src | string | required | Full video API URL, e.g. https://api.example.com/v1/videos/your-video-slug. The player reloads when it changes. | | width | number \| string | native video width | Player width. Numbers are px. | | height | number \| string | native video height | Player height. Numbers are px. | | className | string | | Extra class on the outer element. | | style | CSSProperties | | Inline styles on the outer element; these override the computed size. | | onLoad | (video) => void | | Called with the API's video object once it has been fetched. | | onError | (error) => void | | Called when fetching or playing fails. |

The package also exports fetchVideo(url, { signal }) if you need the video data (title, description, …) yourself.

Advertisements

If the API response has ad_campaign.url (a VMAP/VAST tag), the player loads the Google IMA SDK (imasdk.googleapis.com/js/sdkloader/ima3.js) on its own and plays the ad breaks. You don't need to add a <script> tag. If the SDK is blocked (for example by an ad blocker), the video plays without ads.

A console warning such as "Cross-Origin-Opener-Policy header has been ignored… untrustworthy origin" can come from third-party ad creatives. It is harmless and doesn't come from this package.

Development

npm install
npm run dev     # demo app at http://localhost:5173 (set VITE_VIDEO_API_URL in .env)
npm run build   # build the library into dist/

Publishing

npm login                      # as the owner of chorki-player-sdk (sabbir.chorki)
npm version patch              # or minor / major
npm publish                    # runs the build first (prepublishOnly); access is public