Premium.video

This component handles everything related to video within the creative.

Premium.video.pauseWhenOutOfView(useWholeCreative, threshold, videoEl, videoPlacement, noPlayOnHover)

useWholeCreative	if true, video(s) will pause when the whole creative is out of view, rather than the video element(s) default: false (for bottom panels of mobile formats, only true works)
threshold	decimal percentage amount to count as out of view default: 0.5
videoEl	target video element default: all video elements
videoPlacement	videoPlacement placement of the video, either 'top' or 'bottom' (only for use with mobile skins) optional
noPlayOnHover	if true, prevents automatically adding Premium.video.playOnHover(videoEl) default: false

Plays and pauses video(s) when they are in and out of view.

User pausing the video(s) (PremiumJpControls.getLastAction().playPause === “pause”) will prevent videos from resuming. This only works with scrolling formats and Skins. When used in a Skin, it refers to the top panel scrolling up and will always use the whole creative, not the video element.

note

If the type of the creative is in Premium.video.AutoPlayOnHoverIDs (“cf", "pu", "sa”), it will just call Premium.video.playOnHover(videoEl) instead.

Please note this function should be called only once at the entry-point of the creative code.

Premium.video.pauseWhenOutOfView(true, 0.5, document.querySelector('VIDEO'));

// Calling this method with no arguments is the same as above
Premium.video.pauseWhenOutOfView();

Premium.video.allowPauseWhenOutOfView(videoEl, allow)

videoEl	target video element required
allow	true or false will turn on or off required

Turns on/off Premium.video.pauseWhenOutOfView()

Premium.video.allowPauseWhenOutOfView(document.querySelector('video'), false);

Premium.video.playOnHover(videoEl, hoverEl)

videoEl	target video optional
hoverEl	hover element optional

This will play and pause a video when the user hovers over it, or on another element.

Premium.video.playOnHover('.video', '#hoverEl');

[jp-createvideo-src]

The jpxApi.createVideo has an HTML attribute interface. Just create a DIV with the following attributes:

jp-createvideo-src	path to a local video or a VAST tag
jp-createvideo-controls	jp-controls values
jp-createvideo-poster	path to a local poster frame

<div id="video-container" jp-createvideo-controls="mobileui showplay" jp-createvideo-src="assets/video.mp4" jp-createvideo-poster="assets/poster.jpg"></div>

Premium.creative.createVideoPlayerAppended

This function is for use with the jp-createvideo-src interface. It is to be declared, rather than called. Perform any actions required on the video inside this function, for example Premium.video.pauseWhenOutOfView() or Premium.video.sync()

Premium.creative.createVideoPlayerAppended = function(video, container) {
  // video === video tag in the HTML
  // container === div with jp-createvideo- attributes
}

Premium.video.sync(videoEl, numPanels, syncType)

Parameter	Description
videoEl	target video element required
numPanels	number of persistent panels involved in the sync required
syncType	type of sync default: Premium.video.SyncType_Send

Registers video to be synced. Play, pause and mute/unmute will lock with any other videos registered.

If syncType is SyncType_Send, when the video plays for the first time it will send its sync info to other videos. If syncType is SyncType_Get, the first time the video plays it will try get sync info from other videos. SyncType_Send is the default and will be the most useful. SyncType_Get is for dynamically added videos (for example expandable panels) that need to adjust themselves to the videos in the main part.

There is also SyncType_SendOnExpand (for use in a standard/main panel) and SyncType_SendOnRemoved (for use in a dynamic/expanded panel). Using these types will make the video that is not 'in focus' pause.

// in main/persistent panel
Premium.video.sync(videoEl, 2);

// in expandable/dynamic panel
Premium.video.sync(videoEl, undefined, Premium.video.SyncType_Get);

tip

Set all synced video placement's volume to 0 except one. This ensures smooth and clear sound only coming from one source.

info

For syncing on IOS, only the video in view on creative load can have audio. All other placements must contain a different video file, exported without an audio track.

Please check out Skin - Video Example and Mobile - Video Examples for example creatives showing video syncing.

Premium.video.SyncAttemptInterval

Sets milliseconds between sync attempts default: 2000

Premium.video.SyncAttemptInterval = 500;

Premium.video.SyncAttemptThreshold

Sets seconds to be out of sync to trigger a sync attempt default: 0.2

Premium.video.SyncAttemptThreshold = 1;

Premium.video.endedOffset

Sets seconds to offset from the end of the video (to overcome browsers not rendering when a video is paused at the end) default: 0.15

Premium.video.endedOffset = 0;

Premium.video.getSync(type)

type	default: 'all'	options: 'playpause', 'volumechange' or 'time'

Sends a message to all other videos registered to send their sync info.

Premium.video.getSync('time');

Premium.video.unsync()

De-registers a synced video, allowing the possibility to dynamically sync multiple videos. Note, this function is only available after calling Premium.video.sync().

Premium.video.unsync();

Premium.video.switchOnScroll(videoContainerEl, numPanels, callOnSwitch, threshold)

videoContainerEl	target video container (usually jp-controls div) optional
numPanels	number of panels across which to sync required
callOnSwitch	callback function, will be called on switching optional
threshold	number of pixels scroll after which to switch default: <TOP_PANEL_HEIGHT>

Registers videos to sync and switch visibility when the browser is scrolled past a certain amount. If you need to do more custom stuff on switching the video, you can pass a function as callOnSwitch. This function will be sent either up or down as its only parameter. If required, you can even omit the video element completely and just use the callback.

note

In most cases, this function is to be used in place of Premium.video.sync()

Premium.video.switchOnScroll(document.getElementById('video-container'), 2, function(pos){
    // pos==="up" || pos==="down"
});

Premium.video.pauseVideoWhenHidden

Sets whether or not the hidden video will pause. default: false

Premium.video.pauseVideoWhenHidden = true;

Premium.video.initPlayFromUser(videoEl, audioEl)

videoEl	target video element required
audioEl	target audio element optional

Initializes code to play (and then pause) the media elements from the first touchstart event. This is mainly for allowing video sync on IOS devices.

Premium.video.initPlayFromUser(document.querySelector("VIDEO"));