How to customize the free preview popup when the free preview is completed

Work with our access control feature to enable a free preview on your videos & show a popup when the free preview is completed. Learn how you enable a free preview on your videos and how you can customize the look & feel of the pop-up on the frontend

Step 1: Enable a free preview for a video


1.1. Create an access control profile for free preview videos

  1. Go to settings → Access control → Add profile
  2. Scroll down to 'Advanced Security and Pay per View → Enable Secure video with server side secret and enable Allow free preview of...
  3. Save the profile

1.2. Select a video where you want to enable the new access control profile (free video)

  1. Go through your list of videos in the content library and select a video entry where you want to enable the preview. Alternatively you can enable the free preview functionality on the default access control profile to enable the free preview automatically on all the videos.
  2. Click save. That's it. 

Step 2: Customize the look & feel of the free preview popup

In the case of the 5 minute preview (example Ekhartyoga.com) our video player sends a notification after 5 minutes that the preview has ended, the website then shows a pop-up in the video player via our KS security.

Attached is a CODE file that provides the player integration on, for example, the following page:

https://www.ekhartyoga.com/classes/1472/small-output-big-benefit


On this page we optionally have a video and a trailer depending on the subscription status. We hook up here on an event playerReady to display the play button as soon as the main video or the trailer can actually play.

(function ($) {

"Use strict";

var $header = null, $movie =null, $trailer = null, movie_player = null, trailer_player = null, $subscribe = null,

init = function () {

$header = $('#movie-header');

$subscribe = $('#subscribe-or-login');

$movie = $('#movie .player');

$trailer = $('#trailer .player');

$('#subscribe-or-login .close').on('click', hideRegistration);

if ($('#movie').length != 1) {

$('#play-movie').toggleClass('ready').on('click', showRegistration);

}

},

hideRegistration = function(){

$subscribe.fadeOut(300);

},

showRegistration = function () {

$subscribe.fadeIn(300);

},

playMovie = function () {

$(".featured-banner #trailer").hide();

$header.fadeOut(300);

$(".featured-banner .movie-position").css("position","relative");

$(".featured-banner .movie-position #movie").parent().css("z-index","0");

movie_player.sendNotification('play');

$('body').addClass('playing');

},

playTrailer = function (){

$('#movie').hide();

$(".featured-banner .movie-position").css("position","relative");

$(".featured-banner #trailer").parent().css("z-index","0");

$header.fadeOut(300);

trailer_player.sendNotification('play');

$('body').addClass('playing');

},

playbackEnded = function(){

$(".featured-banner #trailer").parent().css("z-index","-1");

$(".featured-banner .movie-position #movie").parent().css("z-index","-1");

$(".featured-banner .movie-position").css("position","absolute");

$header.fadeIn(300);

$(".featured-banner #trailer").show();

$('#movie').show();

},

playerLoaded = function(widgetId){

var $widget = $('#'+widgetId);

if ( $widget.closest('#movie').length > 0 ){

movie_player = $widget[0];

movie_player.addJsListener('playerReady',movieReady);

}else{

trailer_player = $widget[0];

trailer_player.addJsListener('playerReady',trailerReady);

}

$widget[0].addJsListener('ended',playbackEnded);

},

movieReady = function(){

$('#play-movie').toggleClass('ready').on('click', playMovie);

if ( getQueryVariable('autoplay') === 'yes'){

playMovie();

}

},

trailerReady = function(){

$('#play-trailer').toggleClass('ready').on('click', playTrailer);

},

getQueryVariable = function(variable) {

var query = window.location.search.substring(1);

var vars = query.split("&");

for (var i=0;i<vars.length;i++) {

var pair = vars[i].split("=");

if (pair[0] == variable) {

return pair[1];

}

}

return '';

};

// Kaltura kwidget player ready callback

window.jsCallbackReady = playerLoaded;

$(init);

})(window.jQuery);

In this code, the line is window.jsCallbackReady = playerLoaded; of specific interest. The player invokes this global callback for all players loaded via the dynamic embed. When called, you can start using the javascript API by adding event listeners like I do trailer_player.addJsListener ('playerReady', trailerReady); When this specific lifecycle event is reached by the player, the callback will be called so that interactive things can be done on the surrounding website.
 
In this specific case you want to look at the event "playerReady: freePreviewEnd notification". You can use this to show a popup at that moment, and customize this popup on the front-end as seen below:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us