This is a short description of how you can get started with integrating Accurate Player into your existing web application. Examples of how a basic implementation can look in different web frameworks can be found at our public Gitlab repository.
There is currently four different player implementations:
As the names suggest, these player implementations differ in the type of content they can play, progressive download, or adaptive bitrate using MPEG-DASH or HLS.
Optimised for playback of adaptive media format HLS and MPEG-DASH. This player is available in the following npm repository: @accurate-player/accurate-player-abr
(Experimental) Player with capabilities to preview clips of statically hosted video files. This player is available in the following npm repository: @accurate-player/accurate-player-cutlist
Optimised for playback of adaptive media format HLS. The HlsPlayer can handle a few different flavours of HLS than the AbrPlayer can, contact us for more details. This player is available in the following npm repository: @accurate-player/accurate-player-hls
Optimised for playback of statically hosted video files using progressive download, from e.g. S3 or any other file storage. This player is available in the following npm repository: @accurate-player/accurate-player-progressive
First of all, @accurate-player/accurate-player-core needs to be installed since it contains the shared types and logic for all of the different player implementations.
The player needs to be passed a reference to the HTMLVideoElement object and the license key when initialised. The following sample code demonstrates how to get started with the ProgressivePlayer, but simply replace the names of the other player implementations to use them instead.
import { ProgressivePlayer } from "@accurate-player/accurate-player-progressive";
const player = new ProgressivePlayer(
HTMLVideoElement,
LICENSE_KEY
);
After the player has been successfully instantiated, the player object can be used to access the API. The typical next step would be to load a video file, as such:
player.api.loadVideoFile({
src: "https://download.blender.org/durian/trailer/sintel_trailer-480p.mp4",
frameRate: { numerator: 25, denominator: 1 },
dropFrame: false
});
In the code above, the URL to a video file is passed, as well as the frame rate of the video (and a boolean setting to not use drop frame timecode). Granted that the player can load this file, the video should start playing. This is all you need to do to embed Accurate Player into your own application.
Further logic can be built around the rich JavaScript API of the player, which is accessed through player.api. For example:
player.api.play();
player.api.pause();
Full API documentation can be found here.