Accurate Player Cutlist

Accurate player implementation enabling smooth playback of a cutlist using.

Installation

Install with npm.

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

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 creeate an instant of the cutlist player. Main difference here from For instance ProgressivePlayer is that the CutlistPlayer takes an array of video elements.

const cutlistPlayer = new CutlistPlayer(videos, KEY);

The player will decide which video element is playing which clip etc. In order to be able to hide and show the properate 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";
  }
);

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);

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 current loaded videoFile from the previous step.

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