Documentation

Learn how to integrate CineSrc video streams into your application.

Quickstart

Get started by embedding our player directly into your website with a simple iframe.

Movie Embed

html

<iframe
  src="https://cinesrc.st/embed/movie/1084242"
  width="100%"
  height="100%"
  frameborder="0"
  allowfullscreen
  allow="autoplay; fullscreen; picture-in-picture"
></iframe>

TV Show Embed

html

<iframe
  src="https://cinesrc.st/embed/tv/1396?s=1&e=1"
  width="100%"
  height="100%"
  frameborder="0"
  allowfullscreen
  allow="autoplay; fullscreen; picture-in-picture"
></iframe>

Embed URL Structure

All content is identified by TMDB IDs. Use the following URL patterns:

Movies

https://cinesrc.st/embed/movie/{tmdb_id}

TV Shows

https://cinesrc.st/embed/tv/{tmdb_id}?s={season}&e={episode}

Parameters

NameTypeDescription

typestring

RequiredContent type: "movie" or "tv"

idnumber

RequiredTMDB ID of the movie or TV show

snumber

Season number (TV shows only). Alias: season

enumber

Episode number (TV shows only). Alias: episode

Customization

Customize the player appearance and behavior using URL parameters.

Example with customization

html

<iframe
  src="https://cinesrc.st/embed/movie/1084242?seek=15&muted=true&color=%23e50914"
  width="100%"
  height="100%"
  frameborder="0"
  allowfullscreen
></iframe>

Customization Parameters

NameTypeDescription

seeknumber

Seek button duration in seconds, 1-99 (default: 10)

autoplayboolean

Auto-start playback (default: true)

mutedboolean

Start muted (default: false)

colorstring

Accent color as hex (use %23 for #)

controlsboolean

Show player controls (default: true)

backstring

URL for the back button, or "close" to send postMessage to parent

autonextboolean

Auto-play next episode when current ends (default: true)

autoskipboolean

Auto-skip intro/recap when detected (default: false)

prioritizeboolean

Prioritize the last used server on load (default: false)

lastserverstring

Server ID to use as the preferred server

tnumber

Start time in seconds (alias: time)

continuepromptboolean

Show a Continue / Restart prompt when t is set (default: true). Pass false to seek directly without asking.

qualitystring

Preferred video quality (e.g. "1080", "720", "480")

febboxstring

Febbox authentication token for premium source access

Note: When using hex colors, replace # with %23. Example: #e50914 → %23e50914

Back Button: Add ?back=https://yoursite.com to show a back button in the top-left corner that redirects to your site.

Auto-Next Episode: For TV shows, the player will automatically advance to the next episode after a countdown when the current episode ends or the outro is detected. Add ?autonext=false to disable this feature. A chevron button in the top-right corner allows manual navigation to the next episode.

Skip Intro: When intro data is available for a TV episode, a "Skip Intro" button appears automatically during the intro segment. Add ?autoskip=true to automatically skip intros without user interaction.

Player Events

Listen for events via postMessage to sync your application with the player.

Event Listener Setup

javascript

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://cinesrc.st') return;
  
  const { type, ...data } = event.data;
  
  switch (type) {
    case 'cinesrc:ready':
      console.log('Player ready');
      break;
    case 'cinesrc:timeupdate':
      console.log(data.currentTime, '/', data.duration);
      break;
  }
});

Available Events

EventDataDescription

cinesrc:ready—Player loaded and ready

cinesrc:play—Playback started

cinesrc:pause—Playback paused

cinesrc:timeupdate{ currentTime, duration }Periodic time update

cinesrc:seeking{ currentTime, duration }User started seeking

cinesrc:seeked{ currentTime, duration }Seek operation completed

cinesrc:ended—Playback ended

cinesrc:volumechange{ volume, muted }Volume changed

cinesrc:ratechange{ playbackRate }Playback speed changed

cinesrc:loadedmetadata{ duration }Media metadata loaded (duration available)

cinesrc:nextepisode{ season, episode, internalNavigation, source }Episode changed inside the player. Sources: button, up-next, auto, or episode-selector. Do not replace the iframe when internalNavigation is true.

cinesrc:skipintro{ time }Intro skipped, seeked to specified time

cinesrc:sourceused{ sourceId }Stream source/server changed

cinesrc:close—Back button clicked when back=close

cinesrc:error{ error }Error occurred

cinesrc:response{ command, result }Response to a getter command (e.g. getCurrentTime)

Player Methods

Control the player programmatically by sending commands via postMessage. Setter methods execute immediately. Getter methods return their values asynchronously via the cinesrc:response event.

Sending Commands

javascript

const iframe = document.querySelector('iframe');

function sendCommand(command, args = []) {
  iframe.contentWindow.postMessage({
    type: 'cinesrc:command',
    command,
    args
  }, 'https://cinesrc.st');
}

// Examples
sendCommand('play');
sendCommand('pause');
sendCommand('seek', [120]);
sendCommand('setVolume', [0.5]);

// Getter commands return values via cinesrc:response event
sendCommand('getCurrentTime');
sendCommand('getDuration');

Receiving Getter Responses

javascript

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://cinesrc.st') return;
  if (event.data.type !== 'cinesrc:response') return;

  switch (event.data.command) {
    case 'getCurrentTime':
      console.log('Current time:', event.data.result);
      break;
    case 'getDuration':
      console.log('Duration:', event.data.result);
      break;
    case 'getPaused':
      console.log('Is paused:', event.data.result);
      break;
  }
});

Available Methods

MethodParametersReturnsDescription

play()—PromiseStart playback

pause()—voidPause playback

seek()time: numbervoidSeek to time in seconds

setVolume()vol: numbervoidSet volume (0-1)

setMuted()muted: boolvoidMute/unmute

setPlaybackRate()rate: numbervoidSet speed (0.25-2)

getCurrentTime()—numberGet current playback time in seconds

getDuration()—numberGet total media duration in seconds

getVolume()—numberGet current volume (0-1)

getMuted()—booleanGet current muted state

getPaused()—booleanGet current paused state

getPlaybackRate()—numberGet current playback speed

Best Practices

Always verify message origin

Check event.origin before processing postMessage events in production.

Use responsive containers

Set iframe to 100% width/height and control size with a parent container using aspect-ratio.

Handle errors gracefully

Listen for cinesrc:error events and provide fallback UI when streams fail.

Allow required permissions

Include allow="autoplay; fullscreen; picture-in-picture" on your iframe.

Optimize for performance

Lazy-load the iframe when it enters the viewport to improve initial page load times.

Respect user preferences

Consider user settings for autoplay and volume to enhance the viewing experience.

Test across devices

Ensure your integration works well on various devices and screen sizes for maximum compatibility.

Stay updated

Regularly check the documentation for new features and updates to the player API.