Hello,

Monetize your website by implementing pre-roll video advertisements on your PakPlayer! Offer sponsors to put their video ads at the beginning of your videos and increase your earnings! This was tested under CB v2.6, yet it should work on the whole v2 branch. Keep reading to learn how you can become nearly* as rich as YT!

1. Strongly suggested backup of ./player/pak_player/player.html

2. Due to lots of modifications done to the player.html file, I will ask you to backup your current player.html and create a new one with the following content:

<a href="{if !$ytcode}{$normal_vid_file}{else}api:{$ytcode}{/if}" style="display:block;width:{$player_data.width}; height:{$player_data.height}" id="the_Video_Player"></a>
<script language="JavaScript">
var pakplayer_path = '{$pak_player_url}';
var player_logo = '{$player_logo}';
var hq_video_file = '{$hq_vid_file}';
var normal_video_file = '{$normal_vid_file}';
var ytcode = '{$ytcode}';
var pre_item = "";
var next_item = "";
var splash_img = '{getThumb vdetails=$vdata size="big"}';
var embed_type = '{$Cbucket->configs.embed_type}';
var preroll_videourl = '{$preroll_videourl}';
{literal}
//Now lets write an HQ video function that swaps the original video with hq
var video_quality = 'normal';
function toggleQuality(obj)
{

		if(video_quality=='normal')
		{
			video_quality = 'hq';
			flowplayer(obj).stop();
			flowplayer(obj).setClip({url:hq_video_file});
			flowplayer(obj).play();
		}
		else
		{
			video_quality = 'normal';
			flowplayer(obj).stop();
			flowplayer(obj).setClip({url:normal_video_file});
			flowplayer(obj).play();
		}
}

function pakplayer_hq()
{
	toggleQuality('the_Video_Player');
}
has_hq_function = true;
hq_function = pakplayer_hq;

{/literal}

flowplayer("the_Video_Player", {ldelim}"src":"{$pak_player_url}/pakplayer{if $Cbucket->configs.pak_license}.unlimited{/if}.swf"{rdelim}, 
	{literal}{{/literal}
	{if $Cbucket->configs.pak_license}
	key : '{$Cbucket->configs.pak_license}',	
	{/if}
	{literal}
	plugins: {
           	controls: {

			{/literal}
			{if $pakconfigs}
				{foreach from=$pakconfigs item=value key=config}
					{$config} : "{$value.default}",
				{/foreach}
			{else}
			background: "url("+pakplayer_path+"/bg.png) repeat",
			url: "pakplayer.controls.swf"

			{/if}

		{if $youtube}
		{rdelim},
		youtube :
		{literal}
		{
			url:pakplayer_path+'/pakplayer.youtube.swf',
			enableGdata: true
		}
		{/literal}
		{else}
		{rdelim} // Take this you shitty IE7
		{/if}

		{if $Cbucket->configs.pseudostreaming=='yes' && !$youtube},lighttpd : {ldelim} url: pakplayer_path+"/pakplayer.pseudo.swf"{rdelim}{/if}
{literal}
	},
	canvas: {
	backgroundColor: '#000000',  // For some reason we have to define this 😐
	backgroundGradient : 'none',
	background : '#000000 url('+splash_img+') no-repeat 50pct 50pct'
  },

	clip:
	{ 
		linkUrl : "#",
		{/literal}
		{if $youtube}
		provider : 'youtube',
		urlResolvers: 'youtube',

		{else}
		{if $Cbucket->configs.pseudostreaming=='yes'}provider: 'lighttpd',{/if}
		scaling : 'fit',
		{/if}

		{if $player_data.autoplay}
		autoPlay :true,
		{else}
		autoPlay : false,
		{/if}
		{if $preroll_videourl != "" && !$youtube}
		url: '{$preroll_videourl}', //preroll video
		runningpreroll: true,
		{else}
		runningpreroll: false,
		{if $youtube}
			url : 'api:{$ytcode}',	
			{else}
			url : normal_video_file,
		{/if}
		{/if}
		{literal}
		onStart : function(clip)
		{
			if (clip.runningpreroll == true) {
                    		//if pre-roll is running, hide player controls
				this.getControls().hide();
                	}  
			// Removing background image
			 this.getPlugin("canvas").css({ "background" : "#000000"})
		},

		onFinish: function(clip) {                                           
	                if (clip.runningpreroll == true) { 
                   	 this.getControls().show();
                   	 flowplayer().setClip( {
                           {/literal}{if $youtube}
				url : 'api:{$ytcode}',	
				{else}
				url : normal_video_file,
			   {/if}
			{literal}
                            runningpreroll: false,
                            linkUrl: '#',
                            autoPlay: true
                        });

                   	  //start main video right after pre-roll
                  	  flowplayer().play();                   
                	}             
            	},
		onBeforePause: function(clip) {
        	        if (clip.runningpreroll == true) {
	                    //prevent pausing by clicking the video for pre-rolls
        	            return false;
        	        }
        	},

		onLastSecond: function(clip) {
			if (clip.runningpreroll == false) {
				if(next_item) {
					if($.cookie('auto_play_playlist'))
					window.location = next_item;
				}
			}
		}
	},

	logo:
	{
		url: player_logo,
		fullscreenOnly: false,
		{/literal}
		{$logo_position}
		{literal}

	}
});

function htmlDecode(value){ 
  return $('<div/>').html(value).text(); 
}
function updateEmbedCode(width,height,autoplay)
{ 
	if(autoplay=='yes')
		autoPlayVid = 'yes';
	else
		autoPlayVid = 'no';

	embedPlayerWidth = width;
	embedPlayerHeight = height;
	autoPlayEmbed = autoplay;
	var embedCode =  $('#embed_code').val();

	$('#embed_code').val( $('#embed_code').val().replace(/height=\"([0-9]+)\"/g,'height="'+height+'"') );
	$('#embed_code').val( $('#embed_code').val().replace(/width=\"([0-9]+)\"/g,'width="'+width+'"') );
	$('#embed_code').val( $('#embed_code').val().replace(/height=([0-9]+)/g,'height='+height+'') );
	$('#embed_code').val( $('#embed_code').val().replace(/width=([0-9]+)/g,'width='+width+'') );
	$('#embed_code').val( $('#embed_code').val().replace(/autoplay\%3D(yes|no)/g,'autoplay%3D'+autoPlayVid) );
	$('#embed_code').val( $('#embed_code').val().replace(/autoplay\=(yes|no)/g,'autoplay='+autoPlayVid) );
}

</script>
{/literal}

3. Open ./player/pak_player/pak_player.php

4. Find:

assign('player_data',$in);

and before that, add:

assign('preroll_videourl',config('preroll_videourl'));

5. Open ./admin_area/manage_players.php

6. Find:

'use_playlist',

and before that, add:

'preroll_videourl',

7. Open ./admin_area/styles/cbv2/manage_players.html

8. Find:

<tr>
  <td valign="top"><strong>Pakplayer license</strong><br />
    If you have pakplayer license, please enter it here</td>
  <td valign="top"><input type="text" name="pak_license" id="pak_license" value="{$row.pak_license}" /></td>
</tr>

and after that, add:

<tr>
  <td valign="top"><strong>Preroll video URL</strong><br />
    Video that will play before every video, except YT grabbed ones</td>
  <td valign="top"><input type="text" name="preroll_videourl" id="preroll_videourl" value="{$row.preroll_videourl}" /></td>
</tr>

9. Save and Upload.

10. Go to phpMyAdmin or any DB Manager you use

11. Execute the following query, you may need to replace cb_ if you set a custom table prefix during installation:

INSERT INTO `cb_config` (`configid`, `name`, `value`) VALUES (NULL, 'preroll_videourl', '');

And there you go!  To set your preroll video, go to admin_area->Templates and Players->Manage Settings->Change Preroll Video URL .. Remember that this URL needs to be to a direct video file, such as http://somesite.tld/videos/somevideo.mp4. Note that the preroll won’t play if the video is embedded from YouTube.

Any question, comment, suggestion would be greatly appreciated. Anything you may need, just hit me up.

Best Regards,

Richi

Looking for quality ClipBucket Hosting? Look no further than Arvixe Web Hosting!