Custom Video Controls

This module extends the screenad.video.VideoPlayer class, allowing you to customize the video player's controls.

How to use

Copy the minified library and the stylesheet to your template.
Include only the JavaScript in the HTML of your template - the stylesheet will automatically be added.

<script id="custom-controls-js" src="//media.adrcdn.com/ad-resources/custom-video-controls/2.0.0/custom-video-controls.min.js"></script>

Settings

The settings object accepts all the parameters of the normal screenad.video.VideoPlayer, plus additional parameters and new properties for an existing parameter:

Default settings:

var settings = {
  width: 300,
  height: 169,
  reference: 'video',
  prependTo: document.getElementById('video-container'),
  controls: true,
  poster: 'weborama-videoposter.jpg',
  loop: false,
  autoplay: false,
  muted: false,
  videoFiles: [
      {'src': 'weborama-video.mp4', 'type': 'video/mp4'}
  ]
}

Explanation & Additional settings:

Property	Value	Explanation
width	[Number][String]	This can be a fixed number or a string for percentage. For example '100%'.
height	[Number][String]	This can be a fixed number or a string for percentage. For example, '100%'.
reference	[String]	Default is 'video' and will be used as vide name in reporting. Use different reference names for multiple videos.
prependTo	[String]	The ID of the HTML DIV in which the video player will be placed.
controls	[Boolean][String]	Can be one of the following: true - Recommended option. Will adapt to the current device. Shows all possible controls. 'play' - Always show (only) the play button. 'init' - Always show the big play button only. 'mute' - Always show (only) the mute button. 'playmute' - Always show (only) the play and mute buttons. (*) 'playmutefullscreen' - Always show all buttons, including full screen button. (*) false - Never show controls. (*) Keep in mind that the mute button doesn't work on older devices.
poster	[String]	The image poster to be used while and before loading.
loop	[Boolean]	Indicates if the video should loop after completed. Default is false.
autoplay	[Boolean][String]	Can be true, false or 'hasVisibility'. If you choose true, make sure the property muted is set to false (mandatory specification). If you choose false, muted can be false because the player will play on click interaction (user consent). The last option is 'hasVisibility'. If you choose this the video will only start (muted) if the ad is visible on screen and will pause when it is scrolled out of screen. Remember that this might not work in-app as not all apps have the (MRAID) visibility feature.
muted	[Boolean]	Use true if you want to autoplay the video. Video can only play with sound if there is interaction with the video (unmute if autoplaying or play if not autoplaying).
videoFiles	[Object]	An Object with 'src' and 'type' properties like the example above.
customControlsClass	[String]	Use the name of the class defined in your CSS, that will include a custom sprite (read below for more info).
click	[String]	Default is 'default'. You can set an exit click here just like screenad.click('default'). You can add multiple clicks using 'extra1', 'extra2', etc.
clickCallback	[Function]	Specify your own click handler here. It will overwrite the default exit-click behaviour (that uses 'click' as well).
pauseOnClick	[Boolean]	Default is true. Use false if you don't want the video to be paused when exit-clicking on it.
progress	[Boolean]	Default is true. Use false if you don't want to show the progress bar.
audiolessVideo	[String]	The name of the audioless video file. If this setting is passed, this video will autoplay muted, and a unmute button will be shown. If the user clicks on it, the original video with sound will play.

 

Then instantiate as usual:

var weboVideo = new screenad.video.VideoPlayer(settings); // weboVideo is the video data

Here are some other usage examples:

// get the video element
var videoElement = weboVideo.getVideoElement();
// play the current player
videoElement.play();

Create your own custom controls sprite

If you want to create your own sprite sheets for custom controls. Please use the existing grid PNG. Download it from this link: http://media.adrcdn.com/ad-resources/custom-video-controls/weborama_sprite_grid.png You can edit the pink boxes behind the icons. If you stay in the boxes and leave the image the same size, the code will take care of the rest. Save your PNG (mycustomsprite.png) and upload it to your flight. In your template css (usually styles.css) add a class css like this:

.customTheme {
  background: url(mycustomsprite.png) no-repeat;
}

In your Javascript add the customControlsClass property in settings:

customControlsClass: 'customTheme',

Alter the position of the controls

You can change the position of the controls by using CSS and the following classes:

.weborama-pause

.weborama-play

.weborama-unmute

.weborama-mute

.weborama-fullscreen

.weborama-loading 

When altering the play button, make sure to alter the pause button as well. The same goes for the unmute and mute buttons. 

Inline to Fullscreen Video

If you want to play the video fullscreen (mobile and desktop) on click, you can use the following function:

videoElement.webkitEnterFullscreen();

Scenario:

Video plays inline (autoplay + muted): 

autoplay: true,
muted: true,

You want to play the video fullscreen (device player), when the user clicks on the unmute button: 

screenad.onPreloadComplete = function() {
   initVideoPlayer(); // create the videoplayer
   addEventListener();
};

function addEventListener() {
   // if the video is playing, the unmute button is visible.
   videoElement.addEventListener("playing", unmuteClick); 
}

function unmuteClick(){
   // onclick event on the mute button -- going fullscreen can only be user-initiated 
   document.getElementById('videoContainer_webo_mute').addEventListener('click', goFullscreen);
}

function goFullscreen() {
   // starting the video at position 0. If your are not using this the video will continue from the current time it was playing inline (autoplay mode)
   videoElement.currentTime = 0; 
   // go fullscreen by using device player
   videoElement.webkitEnterFullscreen(); 
}

By making sure the mute button is always shown, please set the custom controls to 'playmute':

controls: 'playmute',

Preview example -- QR preview example

 

Important! Keep in mind autoplay only works in iOS 10 and up, and Chrome version 53 and up (inline and muted). See also this article for more information.