Creating Kaltura player plugin to control KDP events

KDP events are a great way to control your Kaltura player. you can listen to events, trigger actions, and get information about the player.
Lately I’ve been working on a web page where the user can edit a video in an efficient manner using hotkeys. I found a nice plugin that does some of the functionality that i needed, but not all of it. After some investigation I discovered that the best way for me to achieve my goal, was to create a Kaltura Player plugin to control KDP events. That way i could inject custom functionality to control the player.

First thing that needed to be done was to add ‘myPlugin.js’ to the project and add the plugin to the flashvars:

playerConfig: {
            'widget': {
                'wid': '_101',
                'uiconf_id': '123456',
                 'entry_id': '0_123456',
                 'flashvars': {
                    'myPlugin':{
                        'plugin': true,
                        'iframeHTML5Js' : 'js/myPlugin.js'
                    },
              }
       }

Next, I added functionality to the player through myPlugin.js. In this example, I’ve added the following functionality:
1. Pressing the left arrow will jump back in the video video by 10 seconds and the right arrow will jump forward.
2. Alert the user when the video has ended.

mw.kalturaPluginWrapper(function() {
    mw.PluginManager.add( 'myPlugin', mw.KBasePlugin.extend({
        setup: function() {
            var kdp = this.getPlayer();
            kdp.addJsListener('playbackComplete', this.playbackComplete);
            document.onkeydown = function(e) {
                var kdp = document.getElementById('player_kaltura');
                debugger;
                switch(e.keycode) {
                    case 37: //left arrow
                        kdp.sendNotification('doSeek', kdp.evaluate('{video.player.currentTime}') - 10);
                        break;
                    case 39: //right arrow
                        kdp.sendNotification('doSeek', kdp.evaluate('{video.player.currentTime}') + 10);
                        break;
                    default:
                        break;
                }

            }
        },
        playbackComplete: function() {
           alert('Video ended');
        }
    }));
});

And that is all.
You can see the full list of KDP events right here.

About PandaOS:

PandaOS is a software development company that specializes in online video solutions, for web and mobile applications. Our professional development services include, and are not limited to player customization / 3.0 VSAT standard implementation / call to actions / and integration to your preferable ad server. For more information please visit our services website