JP Controls

Standard video controls for GumGum's HTML creatives

CDN latest release:

//cdn.justpremium.com/Justpremium/boilerplate/js/jp-controls_0.6.2.js

CDN previous release:

//cdn.justpremium.com/Justpremium/boilerplate/js/jp-controls_0.6.1.js

Implementation

Include a script tag in the bottom of the body of your html file:

<script src="//cdn.justpremium.com/Justpremium/boilerplate/js/jp-controls_0.6.2.js"></script>

Wrap each video element you wish to be affected in a div with the jp-controls attribute:

<div id="video-container" jp-controls>
    <video>
        <source src="assets/video.mp4"></source>
    </video>
</div>

note

If using jpxApi.createVideo or jp-createvideo-src, jp-controls is implemented by default.

Custom Behaviour and Appearance

Add values to the jp-controls attribute, for example:

<div id="video-container" jp-controls="useheight large">
    <video playsinline muted poster="assets/poster.jpg">
        <source src="assets/video.mp4"></source>
    </video>
</div>

If implementing the HTML jp-createvideo-src interface, add values to jp-createvideo-controls attribute:

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

If implementing jpxApi.createVideo() (the JavaScript API), the 4th argument is the jp-controls value:

var videoContainer = document.querySelector('#video-container');
var vastTag = { src: 'assets/video.mp4', poster: 'assets/poster.jpg', type: 'video/mp4' };
Premium.jpxApi.createVideo('top', videoContainer, vastTag, 'useheight large');

Here are all the values jp-controls accepts:

value	effect
small medium large	overrides size (see details below)
fixed	set the video controls to stay fixed relative to the video
png	use a png sprite sheet instead of the embedded svgs
useheight	make the controls adjust to the video height as its main reference, instead of the width
nofade	stop the controls fading out/sliding off (so they are always visible)
noautounmute	stop the video unmuting when the user clicks play
inithidden	make the controls initiate hidden
forcefit	force the video element to fit exactly to the edge of the controls div - by default it rounds to nearest pixel
videoratio:[RATIO]	override the video ratio from the video metadata with this value. This is useful for fixing issues with initial loading with useheight. The video ratio is the width/height of the video.
nopixelcentring	prevent pixel positioning of the video and the controls. This can improve smoothness of resizing but means everything is centred without taking into account viewport offsets.
showfullscreen	show the full screen button in the UI (note this just shows the button, you need to use PremiumJpControls.callOnClickFullScreen(func) to implement the usual expandable overlay)
showvolume	show a functioning volume slider in the UI
mobileui	sets controls to the default 'light' version, suitable for mobile
showplay	shows the play/pause button (only relevant in conjunction with mobileui)
target:'[CSS_SELECTOR]'	change the target to control a video somewhere else in the DOM. Useful when displaying a canvas video within the jp-controls div
cover	sets video to behave like css `background-size:cover`, the jp-controls div must have its width and height set *

Example using videoratio:

<div id="video-container" jp-controls="videoratio:1.777">
    <video playsinline muted poster="assets/poster.jpg"></video>
</div>

Example using target:

<div id="video-container" jp-controls="target:'.other-container video'">
    <img class="jp-controls-poster" src="assets/poster.jpg" alt="">
    <canvas width="853" height="480"></canvas>
</div>

Custom Styling

Use the following classes:

class	target element
jp-controls-holder	the controls holder (background is the gradient)
jp-controls-play	the play button
jp-controls-pause	the pause button
jp-controls-mute	the mute button
jp-controls-unmute	the unmute button
jp-controls-replay	the replay button
jp-controls-progressbar	the inner moving progress bar
jp-controls-progressbarholder	the progress bar holder
jp-controls-space	is used to space UI elements out. Use this instead of padding/margin
jp-controls-bigplay	the larger play button in the centre (only shown on first-play of videos large enough to display it)
jp-controls-poster	add an element with this class name to act as a poster image

API

There are 5 functions exposed in namespace PremiumJpControls:

PremiumJpControls.resizeAll()

Resizes all jp-controls videos to fit their video element. This is useful if the video is resized or animated with Javascript

PremiumJpControls.getLastAction(elementOrId)

Takes required parameter elementOrId which can be a jp-controls div or the id of a jp-controls div. It returns object {playPause:string, muteUnmute:string} to reflect the user’s last action on this jp-controls element. For example, if the user has clicked to play the video then the object will be {playPause:"play", muteUnmute:undefined} . This is useful to know if a user has initiated play or not.

PremiumJpControls.create()

Re-runs the creation of jp-controls elements. Useful for dynamically adding videos to the document.

PremiumJpControls.callOnComplete(func)

Takes required parameter func which must be a function. This function will be called when the controls are ready with the target jp-controls div as the only argument.

PremiumJpControls.callOnClickFullScreen(func)

Takes required parameter func which must be a function. This function will be called when the full screen button is clicked.

PremiumJpControls.callVideoEndedHandler(elementOrId)

Takes required parameter elementOrId which can be a jp-controls div or the id of a jp-controls div. It forces the controls to behave as if the video has just ended (showing the big replay/play button)

* only available in latest version

Sizes

To get small buttons (14x14px) add the jp-controls-small attribute to the div. To get medium buttons (18x18px) add the jp-controls-medium attribute to the div. To get large buttons (22x22px) add the jp-controls-large attribute to the div. By default, if the device is mobile or the video is over 300px wide then the large-sized buttons will be used, otherwise medium-sized buttons will be used.

Tips

Where possible, any styling for the video element should be applied only to the jp-controls div, not the video element directly. For best results, adjust the video size using the width and height properties, not using the transform property. After making any change to the size of the video element, call PremiumJpControls.resizeAll() to resize the jp-controls elements to fit the new video dimensions.
The controls will horizontally and vertically centre-align the video element within the jp-controls div. To override this, use css to set the marginTop and marginLeft of the video element, like this:

#video-container video{
    margin-top:0 !important;
    margin-left:0 !important;
}

Default styling for controls holder for your reference:

.jp-controls-holder {
    position: absolute;
    bottom: 0;
    opacity: 0;
    transform: scale(50%);
    transition: opacity 0.5s;
    width: 100%;
    padding: 8px 8px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

For Internet Explorer’s wonderful quirks, please use extra-specific selectors (not just a class) for styling the jp-controls div, for example:

Tag name and class:

div.my-vid {
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
}

ID:

#my-vid {
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
}

JP Controls

Implementation​

Custom Behaviour and Appearance​

Custom Styling​

API​

PremiumJpControls.resizeAll()​

PremiumJpControls.getLastAction(elementOrId)​

PremiumJpControls.create()​

PremiumJpControls.callOnComplete(func)​

PremiumJpControls.callOnClickFullScreen(func)​

PremiumJpControls.callVideoEndedHandler(elementOrId)​

Sizes​

Tips​