Options
All
  • Public
  • Public/Protected
  • All
Menu

Accurate Player Progressive API

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

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

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

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

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

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 a slightly earlier first PTS (The audio stream starts slightly before the video), the browser handles this by duplicating the first video frame until the video stream starts.

To handle this scenario we provide a method "getMediaInfo", that takes an url to a MP4 as input ans produce a VideoFile object, with the adjustments needed to play the video frame 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);
});

Channel count

getMediaInfo used in the examples above sets the channelCount 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/timecode/sintel-2048-timecode-stereo.mp4",
  {
    channelCount: 6,
  }
).then((videoFile) => {
  player.api.loadVideoFile(videoFile);
});