Accurate Player Progressive

Accurate Player implementation using standard progressive download.

Installation

Install with npm.

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

Example

Below is an example of how you use player in e.g. angular or react.

import { ProgressivePlayer } from "@accurate-player/accurate-player-progressive";

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

Control the player through player.api. E.g.

player.api.play();
player.api.pause();
Copy

Support for Variable Frame Rate (VFR)

Accurate player offers support for video files with Variable Frame Rate. In order to take advantage of these features you will need to load the videoFiles through the method getMediaInfo in order to make the necessary adjustments of the player. If we modify the previous example it'll look something like this:

import { ProgressivePlayer } from "@accurate-player/accurate-player-progressive";
import { getMediaInfo } from "@accurate-player/probe";

const player = new ProgressivePlayer(videoElement);
getMediaInfo("https://accurate-player-demo-assets.s3.eu-central-1.amazonaws.com/vfr/output-vfr.mp4").then((file) => {
  player.api.loadVideoFile(file);
});
Copy

This will work with both variable and constant frame rate videos.

Timecode and VFR.

Since SMPTE timecodes aren't available for variable frameRate we adjusted the player so Timecode will use a HH:MM:SS.mmm format when loading a video with VFR.

First frame duplicated issue.

A fairly common issue is that the first frame of a video seems to be duplicated when playing in accurate player, causing the entire file being "one frame off". This is usually caused by the audio stream having an earlier first PTS than the video stream, i.e. the audio track starts ahead of the video track, and the browser handles this by duplicating the first video frame until the video actually starts.

To handle this scenario we provide a method getMediaInfo that takes a URL to an MP4 as input, and produces a VideoFile object with the adjustments needed to play the video accurately.

Example:

import { getMediaInfo } from "@accurate-player/probe";

getMediaInfo("https://s3.eu-central-1.amazonaws.com/accurate-player-demo-assets/timecode/sintel-2048-timecode-stereo.mp4").then((videoFile) => {
  player.api.loadVideoFile(videoFile);
});
Copy

Channel count

getMediaInfo used in the examples above sets the channelCount property if it is missing. However, it may be incorrect for channel counts > 2. Best practise is to set the channelCount manually in that case, e.g. with a value from your backend, and then provide it as a partial to getMediaInfo:

import { getMediaInfo } from "@accurate-player/probe";

getMediaInfo("https://s3.eu-central-1.amazonaws.com/accurate-player-demo-assets/original/sintel-2048-surround.mp4", {
  channelCount: 6,
}).then((videoFile) => {
  player.api.loadVideoFile(videoFile);
});
Copy