Skip to main content

API reference

This page will contain the javascript API reference for the player

Player class​

The player class is the main class of the player.

new Player(Element, Options);

Constructor​

Element: String | HTMLElement​

The selector of a <div> or the HTMLElement itself.

Options: Object​

An object containing the options for the annotation tool.

const options = {
  streaming: 'https://vod.pathfindr.dev/videos/5f861706-11ab-4ae9-aca0-f8ef7425c226/c20eb442-8d01-4c9d-a452-91dde3dbf5be/3/converted-videos/1660738207_file_example_mp4_480_1_5mg.mp4.mp4',
  start: 0,
  interval: 5,
  autoplay: false,

  type: "video", // "video" | "audio",
  
  language:  "en" // "en" | "da" | "de",

  playbarTimeout: 3, // seconds

  showPlaybar: true,
  showPlayButton: true,
  showProgress: true,
  showTimer: true,
  showPlaybackRate: true,

  showWaveform: true,

  volumeBreakpoint: 400,
  timerBreakpoint: 400,
  playbackRateBreakpoint: 400,
  progressBreakpoint: 160,

  translations: {
    "en": {
      "Audio Player": "Awesome audio player",
      // ...
    },
    "fr": {
        "Audio Player": "Lecteur audio",
        "Video Player": "Lecteur vidéo",
        // ...
    }
};
note

The following options are available only after version 3.0.0: type, language, playbarTimeout, showPlaybar, showPlayButton, showProgress, showTimer, showPlaybackRate, showWaveform, volumeBreakpoint, timerBreakpoint, playbackRateBreakpoint, progressBreakpoint, translations

streaming: String​

The streaming url.

start: Number​

The starting point of the recording in percent. If set to 25 the recording will start at 25%.

interval: Number​

Interval is for setting a custom timer which will emit an event every x seconds of video played. Very useful for measuring user engagement or for creating custom analytics. The default is 5 seconds.

autoplay: Boolean​

Whether or not the recording should start playing when the player is initialized.

type: String​

The player will automatically detect the type of the recording. If you want to force the player to be in audio mode, you can set the type to "audio".

language: String​

The language of the recorder. Supported languages:

  • da (Danish)
  • en (English)
  • de (German)
playbarTimeout: Number​

The control bar will be hidden after x seconds of inactivity. If the value is 0 the control bar will never hide.

showPlaybar: boolean​

If you want to control the player externally, you can hide the control bar.

showPlayButton: boolean​

Show or hide the big play button.

showProgress: boolean​

Show or hide the progress bar

showTimer: boolean​

Show or hide the timer

showPlaybackRate: boolean​

Show or hide the playback rate

showWaveform: boolean​

In audio mode, you can hide the waveform. See Audio

Breakpoints​

Setting these pixel values will hide the elements when the player is too narrow to display them.

  volumeBreakpoint: 400,
  timerBreakpoint: 400,
  playbackRateBreakpoint: 400,
  progressBreakpoint: 160,
translations: Object​

Allows you to override the default translations or implement a new language.

{
    translations: 
      {
        "da": {
        
          "Audio Player": "Lydafspiller",
          "Video Player": "Videoafspiller",
          "Play": "Afspil",
          "Pause": "Pause",
          "Replay": "Genafspil",
          "Current Time": "Aktuel tid",
          "Duration": "Varighed",
          "Remaining Time": "Resterende tid",
          "Stream Type": "Stream Type",
          "Loaded": "Indlæst",
          "Progress": "Fremskridt",
          "Progress Bar": "Fremskridtslinje",
          "progress bar timing: currentTime={1} duration={2}": "{1} af {2}",
          "Fullscreen": "Fuldskærm",
          "Non-Fullscreen": "Afslut fuldskærm",
          "Mute": "Lydløs",
          "Unmute": "Slå lyd til",
          "Playback Rate": "Afspilningshastighed",
          "Audio Track": "Lydspor",
          "Volume Level": "Lydstyrkeniveau",
          "Play Video": "Afspil video",
          "Modal Window": "Modal vindue",
          "No content": "Intet indhold",
          "Download the file": "Download filen",
          "An error occurred, please try again later.": "Der opstod en fejl, prøv venligst igen senere."
        },
      
        "fr": {
            "Audio Player": "Lecteur audio",
            "Video Player": "Lecteur vidéo",
            // ...
        }
    }
},

Methods​

The methods avaliable on the player class.

Starts the streaming:

play();

Pauses the streaming:

pause();

Destroy the component:

destroy();

Listens for events being emitted:

on(Event, Callback);

Event: String​

The name of the event

Callback: Function​

The function to be called when the event is emitted.

Events​

The events avaliable on the player class.

// The player is ready to stream
player.on('ready', (data) => {
  console.log(data);
});
// The streaming has started
player.on('started', (event) => {
    console.log(event);
});
// The streaming has ended
player.on('ended', (event) => {
    console.log(event);
});
// On each interval (based on interval from the options)
player.on('interval', (event) => {
    console.log(event);
});