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); }
If you need few points of entrance, write to onViqeoLoad array of functions.
Example
window.onViqeoLoad = [function(VIQEO) {}]
Create a new player
Method: VIQEO.createPlayer ()
Player creation depends on its type
// 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) => {})
Events
To listen the events from the Player(s) please use following function:
VIQEO.subscribeTracking(callback, eventName)
If the event is equal to the 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: '' }, }Where,
eventName — object or string with the 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' })
How to get players on the page
VIQEO.getPlayers(filter)
Usage Example
VIQEO.getPlayers({ container: 'extPlayer' })
All available values of the container are shown above
VIQEO.getPlayerBy(selector)
Return the player placed into the selector
selector - selector or element itself
New Player Creation
New standard player creation example:
VIQEO.createPlayer({ videoId: '5d9a52bb0eaa298647e8', profileId: 200, parent: document.getElementById('slot') }).then((player) => {})New external player creation:
VIQEO.createPlayer({ videoSrc: 'video.mp4', previewSrc: 'image.jpg', playerId: 2, profileId: 200, parent: document.getElementById('slot') }).then((player) => {})
New 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) => {})
Dynamic Player Styling/Behaviour Setup:
Viqeo is a template-based player. You can make any number of templates with different styling and behavioural settings 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)
player.setVolume() // Set current volume from 0.0 (mute) to 1.0 (max loud)
player.getVolume() // Get current volume from 0.0 (mute) to 1.0 (max loud)
Content (Stories) Player
Player is similar to a 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:
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>