To control the player and to get its events you can use Javascript API.

Viqeo Script Load

VIQEO object is available on the page if player code is inserted there. To subscribe on events from global VIQEO object you need to use onViqeoLoad event.

Example

var start = function(VIQEO) {
  // Put here a code to be executed after VIQEO load
}
if (!window.VIQEO) {
  window.onViqeoLoad = start;
} else {
  start(window.VIQEO);
}
JS

If you need few points of entrance, write to onViqeoLoad array of functions.

Example

window.onViqeoLoad = [function(VIQEO) {}]

JS


Create new player

Player creation

// Standard player creation (Player for single loaded video)
VIQEO.createPlayer({ videoId: '5d9a52bb0eaa298647e8', profileId: 200, parent: document.getElementById('slot') }).then((player) => {})

// External player creation
VIQEO.createPlayer({ videoSrc: 'video.mp4', previewSrc: 'image.jpg', playerId: 2, profileId: 200, parent: document.getElementById('slot') }).then((player) => {})

// External player creation with a few video streams
VIQEO.createPlayer({ videoSrc: [{ url: 'video1.mp4' }, { url: 'video2.mp4' }], previewSrc: 'image.jpg', playerId: 2, profileId: 200, parent: document.getElementById('slot') }).then((player) => {})

// Recommendation player creation
VIQEO.createPlayer({ playerId: 0012, profileId: 9901, parent: document.getElementById('slot') }).then((player) => {})
JS


Events

To listen events from the Player(s) please use following function:

Events listening

VIQEO.subscribeTracking(callback, eventName)
JS

If an event is equal to condition function callback(options) would be executed.

Example

{ 
  container: 'extPlayer', // block where event is fired
  eventName: 'Player:started', // Event name
  videoId: 'id123', // Unique player ID (In normal and video mode one ID is used)
  player: player, // player object where an event is fired
  
  /**
  * Params below are sent only from External player
  */
  originalParams: { videoSrc: '', previewSrc: '', selector: '' }, 
}
JS

eventName - object or string with event name

All available values of container:

  • extPlayer - External players;
  • stdPlayer - Standard players
  • recommendPlayer - Recommendations Players;
  • vmodePlayer - Player in video mode;
  • recomendVmodePlayer - Recommendations Player in video mode

All available values of eventName:

  • Player:started - Player started to play;
  • Player:ended - Video is watched until the end;
  • Player:paused - Player is paused;
  • Player:replayed - Player started to play after finishing a video;
  • Player:played - Player is resumed;
  • Player:changedSize - Player changed its sizes;
  • Player:previewLoaded - Video preview is loaded;
  • Player:videoLoaded - Video is loaded.
  • Player:advStarted — Advertisement is started to show.
  • Player:advEnded — Advertisement is finished or skipped.
  • Player:durationUpdated - Duration updated.


Example

// Will be fires for ALL players on the page when videos are started:
VIQEO.subscribeTracking(function(options) {}, 'Player:started')
// Will be fired for all External players on the page when videos are started
VIQEO.subscribeTracking(function(options) {}, { eventName: 'Player:started', container: 'extPlayer' })
JS


How to get players on the page

VIQEO.getPlayers(filter)
JS


Usage Example:



VIQEO.getPlayers({ container: 'extPlayer' })
JS

All available value of container are shown above




VIQEO.getPlayerBy(selector)
JS


Return player placed into selector

  • selector - selector or element itself

New Player Creation

New player creation example:

VIQEO.createPlayer({ videoId: '5d9a52bb0eaa298647e8', profileId: 200, parent: document.getElementById('slot') }).then((player) => {})
JS


New external player creation:



VIQEO.createPlayer({ videoSrc: 'video.mp4', previewSrc: 'image.jpg', playerId: 2, profileId: 200, parent: document.getElementById('slot') }).then((player) => {})
JS


New external player creation with few video streams quality:


VIQEO.createPlayer({ videoSrc: [{ url: 'video1.mp4' }, { url: 'video2.mp4' }], previewSrc: 'image.jpg', playerId: 2, profileId: 200, parent: document.getElementById('slot') }).then((player) => {})
JS


Dynamic Player Setup:

Viqeo is a preset-based player. You can make any number of presets in 'Settings > Presets' inside a platform and use their IDs to change player options dynamically.

To create a player with existed preset add presetId=your preset id parameter, which you can get in the platform.

Player methods:

player.destroy() // Removes a player
player.getParent() // Return html-element where player is placed
player.play() // Starts video playback
player.pause() // Pauses video playback
player.getCurrentTime() // Return current time of playback
player.setCurrentTime(time) // Set current time of playback (in seconds)
player.getDuration() // Return duration (in seconds)

Stories Player


Player is similar to standard player. But also you can get all segments of the video:


player.getSegments()

Method returns an array with numbers — the end of each segment.


Fore example: If method returned segments with following numbers: [9, 19, 26, 33].

To rewind to second segment of the video use player.setCurrentTime(segments[0]). So if you need segment number i, you need to call player.setCurrentTime(i !== 0 ? segments[i - 1] : 0).


React support

If you are using React framework, please install react extension for better control:


https://www.npmjs.com/package/viqeo-player-react


Sticky player (Fly-Mode) customisation:


Customisation is available for font color, size and family. Also you can setup text background and color of close button. Style is changed via CSS:


<style type="text/css">
    .viqeo-flyPlayer_custom-style .viqeo-flyPlayer {
        background: beige;
    }
    .viqeo-flyPlayer_custom-style .viqeo-flyPlayer_text {
        font-size: 22px;
        color: red;
        font-family: Geneva, Arial, Helvetica, sans-serif;
    }
    .viqeo-flyPlayer_custom-style .viqeo-flyPlayer_close-button {
        background: red;
    }
</style>