VidCine Player

Documentation

Put a classic film or TV episode on your page with one iframe and a TMDB id. There's no key to request and nothing to install.

Quick Start

Two steps, and the player is on your page.

1Add the player

<iframe
  src="https://player.vidcine.net/embed/movie/106646"
  width="100%"
  height="100%"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
></iframe>

2Keep it 16:9 at any width

<div style="position:relative;aspect-ratio:16/9">
  <iframe
    src="https://player.vidcine.net/embed/movie/106646"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    allow="autoplay; fullscreen; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

Keep allow and allowfullscreen, and leave out sandbox. The player needs its scripts and full screen.

The Address

There's one pattern for films and one for TV episodes.

https://player.vidcine.net/embed/movie/{id}?option=value

https://player.vidcine.net/embed/tv/{id}/{season}/{episode}?option=value

Part	What it is
`{id}`	The film's or show's TMDB id. See TMDB IDs.
`{season}`, `{episode}`	The season and episode numbers, as TMDB lists them.
`option=value`	Anything you want to change. Join several with `&`. See Customizing.

An episode

<iframe
  src="https://player.vidcine.net/embed/tv/6560/1/1"
  width="100%"
  height="100%"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
></iframe>

An id or episode that isn't in the catalog shows a short message in the player.

Customizing

Everything is set in the address. The demo writes it for you.

Accent colour

Set the seek bar, sliders and switches with color: six hex digits, no #.

<iframe
  src="https://player.vidcine.net/embed/movie/106646?color=2fe6d0"
></iframe>

Start time

Open at a set second with t.

<iframe
  src="https://player.vidcine.net/embed/movie/106646?t=90"
></iframe>

Autoplay

Start on load with autoplay. If the browser refuses sound, the player starts muted and tells the viewer how to turn it on. Add muted to always start silent.

<iframe
  src="https://player.vidcine.net/embed/movie/106646?autoplay=true&muted=true"
></iframe>

Server and quality

Many titles have a second copy and more than one file. Choose where playback starts with server and quality. If the title doesn't have it, the player uses its default.

<iframe
  src="https://player.vidcine.net/embed/movie/106646?server=matinee&quality=240"
></iframe>

Buttons and menu rows

Remove buttons with settings, pip and fullscreen, and rows of the settings menu with hide.

<iframe
  src="https://player.vidcine.net/embed/movie/106646?pip=false&hide=speed,more"
></iframe>

All options

Option	Values	Default	What it does
`autoplay`	true	false	Starts on load. If the browser refuses sound, it starts muted and tells the viewer how to turn it on.
`muted`	true	false	Starts with the sound off.
`t`	seconds	0	Starts at this second.
`speed`	0.25 to 2	1	Starting speed. The viewer can still change it.
`quality`	240, 360, 480, 720, 1080	the best file	Starts on this file, if the film has it.
`server`	marquee, matinee	marquee	Starts on this copy, if the film has it.
`color`	hex, no #	ffffff	Seek bar, sliders, switches and selected chips.
`poster`	false	true	Leaves out the frame shown before play.
`title`	false	true	Hides the film title in the phone layout.
`settings`	false	true	Removes the settings button.
`pip`	false	true	Removes the picture-in-picture button.
`fullscreen`	false	true	Removes the fullscreen button.
`hide`	speed, quality, server, more	none	Takes those rows out of the player's menu. Separate several with commas.

All at once

<iframe
  src="https://player.vidcine.net/embed/movie/106646?color=2fe6d0&t=90&speed=1.25&autoplay=true&muted=true&pip=false&hide=more"
></iframe>

Keys and Touch

The player answers these once it has focus.

Key	What it does
`Space` `K`	Play or pause. Hold Space for 2×.
`←` `→` `J` `L`	Back or forward 10 seconds.
`↑` `↓`	Volume.
`M` `F`	Mute, full screen.
`0`–`9`	Jump through the film, 0 to 90%.
`<` `>`	Slower or faster.

On a phone, double-tap either side to skip 10 seconds and tap once for the controls. Settings open as a sheet you can drag away.

Player Messages

The player tells your page what it's doing through postMessage. Check where a message came from before you trust it.

window.addEventListener('message', (e) => {
  if (e.origin !== 'https://player.vidcine.net') return;
  if (e.data?.type !== 'PLAYER_EVENT') return;

  const { event, film, season, episode, currentTime, duration } = e.data.data;
  console.log(event, film, season, episode, currentTime, duration);
});

film is the TMDB id. season and episode come with TV episodes.

Event	When
`play`, `pause`	Playback started or stopped.
`seeked`	A jump finished.
`timeupdate`	Every 5 seconds while the time moves. Enough for a Continue Watching row.
`ended`	The film or episode finished. A good moment to offer the next one.

Send commands

Your page can also control the player.

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

player.postMessage({ type: 'SET_TIME', time: 90 }, 'https://player.vidcine.net');
player.postMessage({ type: 'PAUSE' }, 'https://player.vidcine.net');
player.postMessage({ type: 'PLAY' }, 'https://player.vidcine.net');

A browser can refuse PLAY until the viewer has pressed something. You can try these in the demo.

The Catalog

The whole catalog is open JSON, from any site, with no key.

Request	Returns
`GET /api/films`	Every film.
`GET /api/films?genre=noir`	One genre: `silent`, `horror`, `noir`, `comedy`, `scifi`, `drama`.
`GET /api/films?q=keaton`	Titles, directors and cast that match.
`GET /api/films/106646`	One film by its id.
`GET /api/shows`	Every show. Also takes `?q=` and `?genre=`: `crime`, `western`.
`GET /api/shows/6560`	One show with its seasons and episodes.

Loading…

TMDB IDs

Ids come from TMDB. It's the number in a title's address on themoviedb.org. The demo takes a pasted link too.

themoviedb.org/movie/106646themoviedb.org/tv/6560

TV shows in the catalog

Show	Year	Id	Episodes	Actions
Sherlock Holmes	1954	`6560`	S1: 1–39	Test
Bonanza	1959	`1018`	S1: 19–32 S2: 1–17	Test
Annie Oakley	1954	`13577`	S1: 1–6, 8–9, 11–16, 18–19, 21, 23, 25 S2: 2, 4–7, 11, 20 S3: 1–4, 6, 8, 12, 14–20, 22–23, 25–28, 30, 33–35	Test

Films in the catalog

Film	Year	Id	Actions
Nosferatu	1922	`653`	Test
Night of the Living Dead	1968	`10331`	Test
The General	1926	`961`	Test
Detour	1945	`20367`	Test
His Girl Friday	1940	`3085`	Test
The Last Man on Earth	1964	`21159`	Test
Carnival of Souls	1962	`16093`	Test
Sherlock Jr.	1924	`992`	Test
The Cabinet of Dr. Caligari	1920	`234`	Test
The Phantom of the Opera	1925	`964`	Test
Plan 9 from Outer Space	1957	`10513`	Test
Scarlet Street	1945	`17058`	Test
The Little Shop of Horrors	1960	`24452`	Test
Battleship Potemkin	1925	`643`	Test
The Stranger	1946	`20246`	Test
House on Haunted Hill	1959	`15856`	Test
The Hitch-Hiker	1953	`41462`	Test
My Man Godfrey	1936	`13562`	Test
A Trip to the Moon	1902	`775`	Test

Every title here is in the public domain in the United States, and each one's JSON says why. Rules differ in other countries, so check yours if your audience is elsewhere.

Ready to try it?

Enter an id, set your options, and copy the code.

Open the demo