Javascript API

Shortcut method

afterglow provides (until now) one shortcut method for quick api access.

afterglow.play('playerid')

Whenever you want a player to start playing, you can use this shortcut method. Just provide the proper playerid.

This method is able to handle lightbox players and make them open up if needed.

afterglow.play('myvideo');

Player api

You might want to control the player via Javascript after it has been initialized. afterglow provides an API which is easy to learn and use.

Most of the functions are showcased in the player api example.

❗️

Lightboxes are not players

Please be aware that lightbox players are not initialized before the lightbox is opened. So it is not possible to access their players before launching the lightbox. All of the following api methods will only work when the player has been initialized properly.

afterglow.getPlayer('playerid')

Before using the player, you will always have to get it from afterglow. Let's imagine you had a video with the id 'myvideo'. It gets initialized on launch and is available like this:

afterglow.getPlayer('myvideo');

You could store this in a variable or use it like this for further actions:

play()

// Start video playback
afterglow.getPlayer('myvideo').play();

This method will start video playback if the video is currently paused.

❗️

Not supported on mobile devices

On mobile devices, this method will (probably) not work. They try to prevent automatic playback actions in order to save their user's bandwidth. Depending on things like time since the initiation or current network status (wifi or not), it might work.

pause()

// Pause video playback
afterglow.getPlayer('myvideo').pause();

This method will pause video playback if the video is currently playing.

paused()

// Check wether or not the video is currently playing
var isPaused = afterglow.getPlayer('myvideo').paused();

requestFullscreen()

// Try to enter fullscreen playback
afterglow.getPlayer('myvideo').requestFullscreen();

This method will try to enter fullscreen mode. This will work depending on the users preferences.

🚧

Use SSL for your videos

Several major browsers will stop allowing fullscreen for videos that are not served via HTTPS.

exitFullscreen()

// Exit fullscreen playback
afterglow.getPlayer('myvideo').exitFullscreen();

This method will exit fullscreen playback mode.

isFullscreen()

// Check for fullscreen
var isCurrentlyFullscreen = afterglow.getPlayer('myvideo').isFullscreen();

This method returns true or false, depending on wether or not the player is currently in fullscreen mode.

volume( float )

// Set the volume to .5
afterglow.getPlayer('myvideo').volume(.5);

// Get the current volume level
var currentVolume = afterglow.getPlayer('myvideo').volume();

This method will set the volume to a given float value (0 is muted, 1 is max volume). If you don't pass a value, it will return the current volume level.

duration()

// Get the duration of the currently loaded video
var duration = afterglow.getPlayer('myvideo').duration();

This method will give you the duration of the currently loaded video in seconds (float).

currentTime( float )

// Set the current playback position to 11 seconds
afterglow.getPlayer('myvideo').currentTime(11);

// Get the current playback time
var currentPlaybackTime = afterglow.getPlayer('myvideo').currentTime();

This method will set the current playback time to a given time in seconds, provided as float value. If you don't provide a value, it will return the current playback time in seconds (float).

remainingTime()

// Get the remaining time
var remainingSeconds = afterglow.getPlayer('myvideo').remainingTime();

This method returns the remaining time to the end of the current video in seconds (float).

ended()

// Check if the video playback is finished
var ended = afterglow.getPlayer('myvideo').ended();

This method will return boolean true if the video playback is finished or false if it isn't.

📘

There are even more functions

As the getPlayer() method returns the raw video.js object which is created by afterglow, there are some other functions available. You can get an overview at their API documentation.

We covered the most important functions here but the other ones (well, most of them) will work as well.

Events

As result of the development process, there is now an event system that will allow you to bind anything you want to certain events. These are not part of video.js, so events won't be bound using the getPlayer() method. See the events documentation to learn more about events.