Free KVS video player functionality and demo

KVS Flash / HTML5 Video Player v5.x

Contents

1. General info

Kernel Team Video Player is developed for extensive monetization of your online websites. Player supports huge amount of advertising in different places and on different events, such as pre-roll, post-roll ads, advertising on pause / stop, advertising in controlbar and JavaScript API for HTML-based advertising.

Player works in two modes: local mode and "embed" mode. Local mode is the default mode when you use player on your own website. Embed mode is enabled when your player is being used from third-party websites using embed code. In this mode there is no ability for your so-called embedders to disable or change your advertising. So when somebody uses embed codes on your videos - your advertising will be always displayed as configured. Moreover you have the only place to control player behavior in embed mode, so if you change anything in your embed configuration, this change will be automatically propagated to all third-party websites that are referring to your embed code.

Kernel Team Video Player can be used for free without any limitations.

2. Installation

Consider the following steps to install Kernel Team Video Player:

  • Unpack archive into /%DOMAIN_ROOT%/kt_player folder. If you want to install player into a different folder, make sure you update player .htaccess file with your new value.
  • In /%DOMAIN_ROOT%/kt_player/.htaccess file change %DOMAIN% token with your domain name.
  • Copy demo/crossdomain.xml file into your domain root folder. If you are going to use images or videos from other domains (and subdomains), you should copy this file to every such domain (subdomain).

Important! Any SWF files, which are used via player API should be implemented using ActionScript3.

3. Including player into your HTML code

Please use live configurator to configure player options and build HTML code for pasting to your site.

4. Flash vs HTML5 mode

Kernel Team Video Player supports basic HTML5 mode to make sure that your videos can be played by mobile devices. Player uses the following approach to define which mode should be used for the current browser:

Mode Description Conditions
Flash Default. Works for most desktop devices. Browser supports Flash.
HTML5 video Browser bundled player with only JavaScript advertising support (using player JS API). Works for most of mobile devices. (a) Browser doesn't support Flash.
(b) Video is encoded in MP4 format (h264 codec).
(c) Browser supports playing MP4 format.
Native video Plain link to MP4 file. Works for most of mobile devices. (a) Browser doesn't support Flash.
(b) Video is encoded in MP4 format.
(c) Browser doesn't support playing MP4 format.

Important! HTML5 / Native modes will be used only with MP4 files. All modern mobile devices do support MP4 format.

5. JavaScript API

JavaScript API can be used to pass embed code which will be displayed inside player (if embed initialization variable is set to 1). In order to specify embed code you should define the following JavaScript function:

function getEmbed() {
    return '%EMBED_CODE_GOES_HERE%';
}

In this function you should replace %EMBED_CODE_GOES_HERE% with embed code you want to be used. There can be several embed code concepts:

  • Classic embed code is supported only by Flash and does not provide ability to use JavaScript API: <object id="kt_player" name="kt_player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="600" height="400">
        <param name="allowscriptaccess" value="always"/>
        <param name="allowFullScreen" value="true"/>
        <param name="movie" value="http://%YOUR_DOMAIN_HERE%/kt_player/kt_player.swf"/>
        <param name="flashvars" value="video_url=%VIDEO_URL%&amp;preview_url=%PREVIEW_IMAGE_URL%"/>
        <embed src="http://%YOUR_DOMAIN_HERE%/kt_player/kt_player.swf?video_url=%VIDEO_URL%&amp;preview_url=%PREVIEW_IMAGE_URL%" width="600" height="400" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
    </object>
  • Iframe embed code is an iframe element, which refers to a video player page on your site. Iframe embed code will work in all modes and also fully supports JavaScript API. Using this type of embed code assumes that your site has functionality, which can display player based on the video ID passed. <iframe width="600" height="400" src="http://%YOUR_DOMAIN_HERE%/embed/%VIDEO_ID%" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

Important! If you don't declare getEmbed() function or don't return any value from it, player will generate embed code automatically based on initialization variables passed to it. In this case embed code will have the same size as configured at the current page. You can use getEmbed() function in order to give users embed code with another data (another size for example).

Kernel Team Player also supports many JavaScript callbacks. You can use them as you need:

var player_obj = kt_player('kt_player', '/kt_player/kt_player.swf', '600', '400', flashvars, params);
player_obj.listen('ktVideoStarted', function() {alert('Video started');});
player_obj.listen('ktVideoPaused', function() {alert('Video paused');});
player_obj.listen('ktVideoStopped', function() {alert('Video stopped');});
player_obj.listen('ktVideoScrolled', function(time) {alert('Video scrolled to ' + time + ' seconds');});
player_obj.listen('ktVideoProgress', function(time) {alert('Video played to ' + time + ' seconds');});
player_obj.listen('ktVideoFinished', function() {alert('Video finished');});
player_obj.listen('ktFullScreenActivated', function() {alert('Player goes to full screen mode');});
player_obj.listen('ktFullScreenDeactivated', function() {alert('Player goes to normal mode');});
player_obj.listen('ktPreRollStarted', function() {alert('Configured pre-roll ad started');});
player_obj.listen('ktPreRollFinished', function() {alert('Configured pre-roll ad finished');});
player_obj.listen('ktPostRollStarted', function() {alert('Configured post-roll ad started');});
player_obj.listen('ktPostRollFinished', function() {alert('Configured post-roll ad finished');});

player_obj.listen('ktVideoFormatChanging', function(format) {
    alert('Video format is attempted to be changed to: ' + format);
    // this can be used to show user HTML content on video format change
    // return 'true' (as string) if you want player to cancel default behavior
});

player_obj.listen('ktToolbarLogoClick', function() {
    alert('User clicked on toolbar logo text');
    // this can be used to show user HTML content on toolbar advertising text click
    // return 'true' (as string) if you want player to cancel default behavior
});

If you need to initialize events handling from the outside code, you can define kt_player_loaded function, which will be called after player initialization:

function kt_player_loaded(player_obj) {
    // configure events handling
    player_obj.listen(...);
}

When initialized, player will change its DIV-container styles so that it is possible to easily display HTML layers above player (e.g. ads, floating banners, additional menus):

container styles {
    width: 600px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

Additional player control API:

// get player DIV-container
player_obj.container();

// start playback
player_obj.play();

// pause playback
player_obj.pause();

6. Player files list

Here is the list of all files bundled with player and their description:

Filename Description
.htaccess Contains redirection rules, which switch player into "embed" mode for all requests from third-party domains.
btn_play.jpg Main play button which is displayed in HTML5 mode on top of player.
embed.php PHP code used to enable "embed" mode for third-party domains. Works together with .htaccess.
embed.xml "Embed" mode configuration. Modify this file to configure your player behavior in "embed" mode.
configure_en.html (configure_ru.html) Player configurator, lets you visually configure player and gives you HTML code to embed.
expressInstall.swf Flash update component from Adobe.
kt_player.js JavaScript to embed player into HTML.
kt_player.swf Player itself.
demo/crossdomain.xml This file should be copied into document root of all domains (and sub-domains) which store any data used by player.
demo/float.xml Floating banners configuration example.