Accurate Player Cutlist

Accurate player implementation enabling smooth playback of a cutlist using progressive streaming.

Installation

Install with npm.

npm install --save @accurate-player/accurate-player-core @accurate-player/accurate-player-cutlist
Copy

Minimal Working Example

In this section we will show step by step how to initialize a CutlistPlayer, load a videoFile and a cutlist to show in preview.

First, we create an instance of the CutlistPlayer. Main difference here from e.g ProgressivePlayer is that the CutlistPlayer takes an array of video elements.

const cutlistPlayer = new CutlistPlayer(videos, KEY);
Copy

The player will decide which video element is playing which clip etc. In order to be able to hide and show the proper video element the player will emit a CutChange event. The event contains information about which element was playing and which that will play now.

cutlistPlayer.addEventListener(CutlistPlayerEventName.CutChange, (ev: CutChangedEvent) => {
  if (ev.previousVideo) {
    ev.previousVideo.style.display = "none";
  }
  ev.currentVideo.style.display = "block";
});
Copy

The next step is to load a video file:

const original: VideoFile = {
  src: "https://accurate-player-demo-assets.s3.eu-central-1.amazonaws.com/timecode/sintel-2048-timecode-stereo.mp4",
  frameRate: { numerator: 24, denominator: 1 },
  dropFrame: false,
};
cutlistPlayer.api.loadVideoFile(original);
Copy

We then define a cutlist and loads it to the player. The start and end property is, if nothing else is specified the frame number of the currently loaded videoFile from the previous step.

const cutList: Cut[] = [
  {
    start: 0,
    end: 3 * 24,
  },
  {
    start: 240,
    end: 15 * 24,
  },
];
cutlistPlayer.api.loadCutList(cutList);
Copy

Black frame playback

The player also support playback of black frame cuts. This need to be enabled when the player is created

const cutlistPlayer = new CutlistPlayer(videos, KEY, { blackFrames: true });
Copy

In this mode, the player requires at least two videos to be provided. One of the videos will be reserved for black frame playback.

This is an example of a 10 frames long black frame cut

{
 start: 0,
 end: 10,
 black: true
}
Copy