As of KickApps version 4.0, an [[Javascript_Event_System|event system]] has been added to all hosted pages. The KickApps event system provides hooks throughout the platform, allowing developers to create plugins such as our [[Using_Facebook_Connect_With_KickApps|Facebook Connect]] plugin.
The following is a list of all events currently exposed and supported by KickApps. This list is likely to grow over time with each new release. If you have a specific need, please let us know by posting on the [http://community.kickdeveloper.com/service/displayMessageBoard.kickAction?as=764 KickDeveloper Message boards].
== Global Events ==
==== Page Events ====
* [[Javascript Event System - global-before-page-render|global-before-page-render]]
* [[Javascript Event System - global-after-page-render|global-after-page-render]]
* [[Javascript Event System - global-page-before-unload|global-page-before-unload]]
==== Login Popup ====
* [[Javascript Event System - global-login-popup-display|global-login-popup-display]]
* [[Javascript Event System - global-login-popup-before-submit|global-login-popup-before-submit]]
==== Popups ====
* [[Javascript Event System - global-popup-before-init|global-popup-before-init]]
* [[Javascript Event System - global-popup-after-init|global-popup-after-init]]
* [[Javascript Event System - global-popup-create|global-popup-create]]
== Groups Page ==
==== General ====
* [[Javascript Event System - group-page-load|group-page-load]]
==== Joining & Leaving ====
* [[Javascript Event System - group-page-after-join|group-page-after-join]]
* [[Javascript Event System - group-page-after-leave|group-page-after-leave]]
==== Commenting ====
* [[Javascript Event System - group-page-before-add-comment|group-page-before-add-comment]]
* [[Javascript Event System - group-page-after-add-comment|group-page-after-add-comment]]
==== Tagging ====
* [[Javascript Event System - group-page-before-add-tag|group-page-before-add-tag]]
* [[Javascript Event System - group-page-after-add-tag-success|group-page-after-add-tag-success]]
* [[Javascript Event System - group-page-after-add-tag-error|group-page-after-add-tag-error]]
== Facebook Connect ==
==== General ====
* [[Javascript Event System - fbc-before-init|fbc-before-init]]
* [[Javascript Event System - fbc-after-init|fbc-after-init]]
* [[Javascript Event System - fbc-after-post-success|fbc-after-post-success]]
== Profile Page ==
==== General ====
* [[Javascript Event System - profile-page-load|profile-page-load]]
* [[Javascript Event System - profile-page-toggle-about-me|profile-page-toggle-about-me]]
* [[Javascript Event System - profile-page-toggle-more-tags|profile-page-toggle-more-tags]]
* [[Javascript Event System - profile-page-after-rating|profile-page-after-rating]]
==== Friends & Fans ====
* [[Javascript Event System - profile-page-before-add-friend|profile-page-before-add-friend]]
* [[Javascript Event System - profile-page-after-add-friend|profile-page-after-add-friend]]
==== Commenting ====
* [[Javascript Event System - profile-page-before-display-comment-form|profile-page-before-display-comment-form]]
* [[Javascript Event System - profile-page-after-display-comment-form|profile-page-after-display-comment-form]]
<br/>
* [[Javascript Event System - profile-page-before-hide-comment-form|profile-page-hide-comment-form]]
* [[Javascript Event System - profile-page-after-hide-comment-form|profile-page-hide-comment-form]]
<br/>
* [[Javascript Event System - profile-page-before-add-comment|profile-page-before-add-comment]]
* [[Javascript Event System - profile-page-after-add-comment|profile-page-after-add-comment]]
<br/>
* [[Javascript Event System - profile-page-before-flag-comment|profile-page-before-flag-comment]]
* [[Javascript Event System - profile-page-after-flag-comment|profile-page-after-flag-comment]]
<br/>
* [[Javascript Event System - profile-page-before-delete-comment|profile-page-before-delete-comment]]
* [[Javascript Event System - profile-page-after-delete-comment|profile-page-after-delete-comment]]
<br/>
* [[Javascript Event System - profile-page-before-load-comments|profile-page-before-load-comments]]
* [[Javascript Event System - profile-page-after-load-comments|profile-page-after-load-comments]]
==== Profile Feeds ====
* [[Javascript Event System - profile-page-before-load-feeds|profile-page-before-load-feeds]]
* [[Javascript Event System - profile-page-after-load-feeds|profile-page-after-load-feeds]]
<br/>
* [[Javascript Event System - profile-page-before-display-feed|profile-page-before-display-feed]]
* [[Javascript Event System - profile-page-after-display-feed|profile-page-after-display-feed]]
<br/>
* [[Javascript Event System - profile-page-feed-error|profile-page-feed-error]]
== Media Play Page ==
==== General ====
* [[Javascript Event System - play-page-load|play-page-load]]
* [[Javascript Event System - play-page-before-delete|play-page-before-delete]]
* [[Javascript Event System - play-page-after-rating|play-page-after-rating]]
==== Favorites ====
* [[Javascript Event System - play-page-before-add-favorite|play-page-before-add-favorite]]
* [[Javascript Event System - play-page-after-add-favorite|play-page-after-add-favorite]]
* [[Javascript Event System - play-page-before-remove-favorite|play-page-before-remove-favorite]]
* [[Javascript Event System - play-page-after-remove-favorite|play-page-after-remove-favorite]]
==== Commenting ====
* [[Javascript Event System - play-page-before-add-comment|play-page-before-add-comment]]
* [[Javascript Event System - play-page-after-add-comment|play-page-after-add-comment]]
==== Related Media Lists ====
* [[Javascript Event System - play-page-before-load-related-media|play-page-before-load-related-media]]
* [[Javascript Event System - play-page-after-load-related-media|play-page-after-load-related-media]]
* [[Javascript Event System - play-page-before-display-related-media|play-page-before-display-related-media]]
* [[Javascript Event System - play-page-after-display-related-media|play-page-after-display-related-media]]
==== Tagging ====
* [[Javascript Event System - play-page-before-add-tag|play-page-before-add-tag]]
* [[Javascript Event System - play-page-after-add-tag-success|play-page-after-add-tag-success]]
* [[Javascript Event System - play-page-after-add-tag-error|play-page-after-add-tag-error]]
== New Member Registration Page ==
==== General ====
* [[Javascript Event System - register-user-page-load|register-user-page-load]]
* [[Javascript Event System - register-user-page-before-submit|register-user-page-before-submit]]
* [[Javascript Event System - register-user-page-coppa-cookie-found|register-user-page-coppa-cookie-found]]
== Adding new media & blogs ==
==== Adding Videos ====
* [[Javascript Event System - add-video-page-load|add-video-page-load]]
* [[Javascript Event System - add-video-page-before-submit|add-video-page-before-submit]]
==== Adding Blogs ====
* [[Javascript Event System - add-blog-page-load|add-blog-page-load]]
* [[Javascript Event System - add-blog-page-before-submit|add-blog-page-before-submit]]
==== Adding Photos ====
* [[Javascript Event System - add-photo-page-load|add-photo-page-load]]
* [[Javascript Event System - add-photo-page-before-submit|add-photo-page-before-submit]]
==== Adding Audio tracks ====
* [[Javascript Event System - add-audio-page-load|add-audio-page-load]]
* [[Javascript Event System - add-audio-page-before-submit|add-audio-page-before-submit]]
== Media List & Management ==
==== General ====
* [[Javascript Event System - media-list-page-load|media-list-page-load]]
* [[Javascript Event System - media-add-success|media-add-success]]
== Message Boards ==
==== General ====
* [[Javascript Event System - mb-forum-list-page-load|mb-forum-list-page-load]]
* [[Javascript Event System - mb-discussion-list-page-load|mb-discussion-list-page-load]]
==== Create Discussion ====
* [[Javascript Event System - mb-create-discussion-page-load|mb-create-discussion-page-load]]
* [[Javascript Event System - mb-create-discussion-before-submit|mb-create-discussion-before-submit]]
==== Discussion Thread ====
* [[Javascript Event System - mb-view-discussion-page-load|mb-view-discussion-page-load]]
==== Discussion Thread Replies ====
* [[Javascript Event System - mb-create-discussion-thread-page-load|mb-create-discussion-thread-page-load]]
* [[Javascript Event System - mb-create-discussion-thread-before-submit|mb-create-discussion-thread-before-submit]]
== My Home ==
==== General ====
* [[Javascript Event System - my-home-page-page-load|my-home-page-page-load]]
==== Feeds ====
* [[Javascript Event System - my-home-page-before-load-feeds|my-home-page-before-load-feeds]]
* [[Javascript Event System - my-home-page-before-display-feed|my-home-page-before-display-feed]]
* [[Javascript Event System - my-home-page-feed-error|my-home-page-feed-error]]
* [[Javascript Event System - my-home-after-display-feed|my-home-after-display-feed]]
* [[Javascript Event System - my-home-page-after-load-feeds|my-home-page-after-load-feeds]]
== List Page ==
==== General ====
* [[Javascript Event System - list-page-load|list-page-load]]
* [[Javascript Event System - search-results-page-load|search-results-page-load]]
== Future Events ==
<span style="color:#CC2200;">'''Note''': The following list represents a sneak peak at some of the events that are slated for the next version of the KickApps platform. They may not be available in the current version of the KickApps platform, and are unsupported at this time.</span>
* [[Javascript Event System - custom-page-loaded|custom-page-loaded]]
[[category:Javascript API]]
'''Actions''' enable you to add behavior or change components' properties in response to '''events''' initiated by the user or issued by widget components.
==Add an action via the Actions window==
# Select a component.
# Open the Actions panel by clicking the Actions option under the Window menu.
#:[[Image:ActionsPanel.png| border]]
# Click the Add Action button.
#:[[Image:AddAction.png |border]]
[[Image:RightClickAddAction.png |border|thumb|'''Tip:''' You can also add an action by right-clicking your mouse and selecting Add Action from the context menu. ]]
# The add/edit action window will appear.
#:[[Image:AddActionWindow.png |border]]
# Select the Event that you'd like to trigger your desired action from the Event dropdown. (Tip: type into the dropdown; it auto-completes. Click enter when you see the event you're looking for.)
# Select the Action that you'd like to be executed when the event occurs.
# If the action you chose requires a value, enter the value directly or click Select to choose the value of a component property.
#:[[Image:ActionsPanelProperties.png |border]]
# Click Add.
==Remove an action==
# Select a component.
# Open the Actions panel.
# Click on the action that you'd like to remove.
# Click the garbage can icon.
==Setting values for actions==
There are 5 ways to set values for actions:
# Enter a number (you can use up to 2 decimal places).
# Use the value of any property on any component in your widget, including nested properties.
#:Syntax:
#:<code>#{componentName.propertyName}</code>
#:Example:
#:<code>#{List1.height}</code>
#:Access properties of a component's parent using this syntax:
#:<code>#{Text Area 1.parent.height}</code>
#:The Advanced List component has a property called <tt>contentSource</tt>. <tt>contentSource</tt> returns the raw source of the Advanced List's content, e.g., its RSS, Atom, or XML feed. You can drill into nodes and properties of the <tt>contentSource</tt> by chaining their names onto <tt>contentSource</tt>, like so:
#:<code>#{Advanced List 1.contentSource.channel.item.0.link}</code>
#:The Advanced List also has a <tt>selectedItem</tt> property that represents its current item. This property can be chained with another property called <tt>xmlSource</tt> to retrieve and drill into the raw XML content of the selected item. In the example below, the Advanced List's content is [http://api.yes.com/1/related?mid=7040859&type=xml an XML feed from Yes.com] containing <tt>songs</tt> nodes that contain <tt>cover</tt> nodes containing URLs to cover art.
#:<code>#{Advanced List.selectedItem.xmlSource.cover}</code>
# Use JavaScript to compute a value from the values of one or more component properties.
#:Syntax:
#:<code>javascript:eval(componentName1.propertyName + componentName2.propertyName)</code>
#:Example:
#:<code>javascript:eval(List1.height + Button1.height)</code>
#:You can also abbreviate "javascript" like this:
#:<code>js:eval(List1.height + Button1.height)</code>
# Call a JavaScript function on the page that the widget is installed on.
#:Syntax:
#:<code>javascript:functionName(optionalVariable)</code>
#:Example:
#:<code>javascript:incrementViewCount(#{VideoPlayer.selectedMedia.title})</code>
# Use relative values to increment or decrement from the current value of a property.
#:Syntax:
#:<code>A number preceded by a plus or minus sign</code>
#:Example:
#:<code>+ 10</code>
==Events Reference==
{{Standard Events}}
===3d Carousel Component===
* [[#Standard Events]]
{{3d Carousel Component Events}}
===3d Gallery Component===
* [[#Standard Events]]
{{3d Gallery Component Events}}
===AppContainer===
{{AppContainer Events}}
===Audio Component===
* [[#Standard Events]]
{{Audio Component Events}}
===Auto List Component===
* [[#Standard Events]]
{{Auto List Component Events}}
===Button Component===
* [[#Standard Events]]
{{Button Component Events}}
===Container Component===
* [[#Standard Events]]
{{Container Component Events}}
===List Component===
* [[#Standard Events]]
{{List Component Events}}
===Image/.swf Component===
* [[#Standard Events]]
===Rating Component===
* [[#Standard Events]]
===Rectangle Component===
* [[#Standard Events]]
===Scrubber Component===
* [[#Standard Events]]
===Slide Component===
* [[#Standard Events]]
{{Slideshow Events}}
===Text Component===
* [[#Standard Events]]
===Text Input Component===
* [[#Standard Events]]
{{Text Input Component Events}}
===Timer Component===
* [[#Standard Events]]
{{Timer Component Events}}
===Video Component===
* [[#Standard Events]]
{{Video Component Events}}
===Video Player (basic, all-in-one player)===
* [[#Standard Events]]
{{Video Component Events}}
===Volume Control Component===
* [[#Standard Events]]
==Actions Reference==
{{Standard Actions}}
===3d Carousel Component===
* [[#Standard Actions]]
{{3d Carousel Component Actions}}
===3d Gallery Component===
* [[#Standard Actions]]
{{3d Gallery Component Actions}}
===App Container===
* [[#Standard Actions]]
===Audio Component===
* [[#Standard Actions]]
{{Audio Component Actions}}
===Auto List Component===
* [[#Standard Actions]]
{{Auto List Component Actions}}
===Button Component===
* [[#Standard Actions]]
===Container Component===
{{Container Component Actions}}
===Image/.swf Component===
* [[#Standard Actions]]
===List Component===
* [[#Standard Actions]]
{{List Component Actions}}
===Rating Component===
* [[#Standard Actions]]
===Rectangle Component===
* [[#Standard Actions]]
===Scrubber Component===
* [[#Standard Actions]]
===Slide Component===
* [[#Standard Actions]]
{{Slideshow Actions}}
===Text Component===
* [[#Standard Actions]]
===Text Input Component===
* [[#Standard Actions]]
===Timer Component===
* [[#Standard Actions]]
{{Timer Component Actions}}
===Video Component===
* [[#Standard Actions]]
{{Video Component Actions}}
===Video Player (basic, all-in-one player)===
* [[#Standard Actions]]
{{Video Component Actions}}
===Volume Control Component===
* [[#Standard Actions]]
[[Category:Widgets & Video Players]]
A couple of affiliates have asked us how to make a "Switch Category" dropdown box like the one that can be found on the <a mce_href="http://upload.youintroduce.bet.com/kickapps/service/searchEverything.kickAction?as=4140&mediaType=video&sortType=recent&tab=yes&includeVideo=on" href="http://upload.youintroduce.bet.com/kickapps/service/searchEverything.kickAction?as=4140&mediaType=video&sortType=recent&tab=yes&includeVideo=on">BET site</a>:
<p></p>
<img class="screenshotLg" mce_src="http://www.kickdeveloper.com/images/bet_dropdown.gif" src="http://www.kickdeveloper.com/images/bet_dropdown.gif"><hr id="system-readmore">
<p>
When users select a video category from this dropdown box, the page refreshes, returning a list page composed of videos that belong to the selected category. While we don't yet offer a pre-built dropdown box for media categories like this one, it's easy to build one yourself! Here's a brief tutorial based on the process that we used to make the one for BET:
</p>
<ol type="1">
<li>
Make the categories that you want to appear in this dropdown box in the <a mce_href="http://affiliate.kickapps.com/kickapps/user/displayAffiliateLoginPage.kickAction" target="_blank" title="KickApps Affiliate Center" href="http://affiliate.kickapps.com/kickapps/user/displayAffiliateLoginPage.kickAction">Affiliate Center</a>
under Configure > Media Categories.
</li>
<li>
Upload the media that you want to be accessible through your dropdown box, making sure to assign the proper category to each item.
</li>
<li>
After your media has been uploaded, pick an admin tag for each category.
</li>
<li>
Login to the Affiliate Center and browse to Manage > Media.
</li>
<li>
For each of the pending media items that you see displayed, click Details, and on the page that comes up, fill in the admin tag that you've picked for the category that this media item has been assigned to (you'll see the category on the left, a little beneath the admin tags box).
</li>
<li>
In the right column on the same page, check to make sure that the Approve radio button under Current Status is selected.
</li>
<li>
Click save.
</li>
<li>
Now all we need to do is build the HTML dropdown box and write the JavaScript that will drive it. Fortunately, I've taken care of that for you:
<br>
<br>
<pre xml:javascript=""> <script type="text/javascript">
function switchcat(categories){
var cat = (categories.options[categories.selectedIndex].value);
if(cat!==''){ window.location="/kickapps/service/searchEverything.kickAction?keywords="+cat+"
&as=AS_NUMBER&mediaType=MEDIA_TYPE_LOWERCASE&includeVideo=on";
}
}
</script>
<select name="categories" onChange="switchcat(this)" id="category_dropdown">
<option value="" selected>Pick A Category</option>
<option value="admintag1">Category1</option>
<option value="admintag2">Category2</option>
</select>
</pre>
</li>
<li>
Copy this code into your favorite text editor.
</li>
<li>
Replace "Category1" with the name of the first category that you created in Step 1. Replace "admintag1" with the name of the admin tag that you picked in Step 3. Repeat for the rest of the <option>s, and make as many new <option>s as you need to cover all of the categories that you want in your dropdown box.
</li>
<li>
Notice the very end of the window.location rule, where it says "&includeVideo=on". What this means is that this rule will pull up all of the videos that fall under the category that you select in the dropdown box.
If you'd rather have audio, photos, blogs, members, or groups instead of videos, replace &includeVideo=on with &includeAudio=on, &includePhoto=on, &includeBlog=on, &includeUser=on, or &includeGroups=on. If you'd like to pull up any combination of these media types, you can append any of these terms to the end of the rule.
</li>
<li>
Once you've modified this code to your satisfaction, log back into the Affiliate Center and navigate to Configure > Pages > Global Page Template.
</li>
<li>
Paste the code you just modified into the <head></head> section.
</li>
<li>
Click save.
</li>
<li>
View your site. You now have a BET-style dropdown box.
</li>
</ol>
<p>
Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? <a mce_href="http://www.kickdeveloper.com/support/index.php" href="http://www.kickdeveloper.com/support/index.php">Contact us at support@kickapps.com</a>.</p>
[[category:Page Customization]]
App Studio Advertising Plug-Ins enable you to run ads in your video players from a number of ad networks and other ad providers. This list is always growing, so please [http://www.kickapps.com/contact-us/index.php contact us] if you need support for an ad provider that's not listed here.
=Run ads in your video player=
To run ads in a video player, drag one of the Advertising Plug-Ins from the Advertising panel onto your video player. You can then configure the advertising in the ad plug-in's properties panel, which will appear in the right column of the App Studio. Details on configuring each Advertising Plug-In are available below.
=Disable player controls during ad playback=
You probably don't want player controls to be functional while an ad is playing (so that the user can skip the ad, play another video over the ad, etc.). To effectively disable the rest of your widget while a video ad is running, we recommend the following:
# Create [[Rectangle|rectangle components]] that cover your entire widget area except for the video player.
# Set all of them to transparent by turning down the opacity control at the top right of the stage to 0.
# [[Containers_and_Layout_Constraints|Group these rectangles into a new Container component]].
# Move this Container to the top [[Layers|layer]] of your widget.
# Use the video player's [[Actions#Video_Component|"Video ad start" and "Video ad end" events]] to trigger a show/hide actions on this Container.
=Advertising Plug-Ins=
==24/7 OAS==
Our 24/7 Advertising Plug-In supports the following features:
* In-stream '''video ads''' that can be played before, after, or at any point during the playback of the current video.
* Run an unlimited number of '''video ads''' before, after, or at any point during the playback of a content video
** Click-through URL available on each video ad
** Video ad tags are applied to a video player with a frequency setting to determine how many content videos will play between each video ad slot (i.e., 'play 2 videos between each ad slot')
* 5 different slots for '''companion ads'''. When the player receives the XML from 24/7 it will pass an array of companion ad objects for each of these slots to a JS function on the page called <tt>KATwentyFourSevenCompanionAd</tt>. The JS objects will look like this:
::<code javascript>
{position, width, height, imageURL, clickURL, title}
</code>
* Tracking tags for
** user clicked on video ad
** video ad start
** video ad middle
** video ad end
* Video player can pass the ID of the current video to 24/7 if you include <tt>[mediaId]</tt> in your ad tag, like so:
::<code html4strict>
http://oascentral.blahblahblah/RealMedia/ads/adstream_sx.ads/blahblahblah/blah?mediaid=[mediaId]
</code>
To use the 24/7 advertising plug-in,
# Configure your 24/7 account to output XML in the following format:<br /> <code xml>
<?xml version="1.0" encoding="UTF-8"?>
<!-- 24/7 Real Media XML Template for KickApps Widget -->
<!-- Last Update : 02/10/2009 -->
<VideoXML>
<!-- URL to count XML download -->
<CoD_URL/>
<Keyword/>
<!-- Instream Ad Setup Begins -->
<Playlist>
<!-- Pre-roll Setup Begins -->
<!-- duration = length in sec, playafter = delay in sec -->
<Track id="" duration="" playafter="">
<!-- Pre-roll URL-->
<videoURL/>
<!-- Video click-through URL -->
<videoClickURL/>
<!-- URL to count click-throughs -->
<TrackVideoClickURL/>
<!-- URL to count pre-roll start -->
<TrackStartURL/>
<!-- URL to count pre-roll mid -->
<TrackMidURL/>
<!-- URL to count pre-roll end -->
<TrackEndURL/>
</Track>
<!-- Pre-roll Setup Ends -->
<Track id="" duration="" playafter="">
<videoURL/>
<videoClickURL/>
<TrackStartURL/>
<TrackMidURL/>
<TrackEndURL/>
</Track>
</Playlist>
<!-- Instream Ad Setup Ends -->
<CompanionAd position="sponsor" width="" height="">
<ImageURL/>
<ClickURL/>
<Title/>
</CompanionAd>
<!-- Top Companion Ad Begins -->
<CompanionAd position="top" width="" height="">
<ImageURL/>
<ClickURL/>
<Title/>
</CompanionAd>
<!-- Top Companion Ad Ends -->
<!-- Right Companion Ad Begins -->
<CompanionAd position="right" width="" height="">
<ImageURL/>
<ClickURL/>
<Title/>
</CompanionAd>
<!-- Right Companion Ad Ends -->
<!-- Bottom Companion Ad Begins -->
<CompanionAd position="bottom" width="" height="">
<ImageURL/>
<ClickURL/>
<Title/>
</CompanionAd>
<!-- Bottom Companion Ad Ends -->
<!-- Left Companion Ad Begins -->
<CompanionAd position="left" width="" height="">
<ImageURL/>
<ClickURL/>
<Title/>
</CompanionAd>
<!-- Left Companion Ad Ends -->
</VideoXML></code>
# In the App Studio, drag and drop the 24/7 plug-in from the Advertising panel onto your video player.
# Generate a 24/7 ad tag URL that will return XML in the format above. Paste that tag into the 24/7 properties panel at the top of the rightmost column.
'''Sample ad tag'''
<code html4strict>
http://flexonrails.net/bits/twofourseven.xml
</code>
==Adap.tv==
# Drag the adap.tv plug-in onto your video player.
# Enter your Publisher ID in the adap.tv properties panel at the top of the rightmost column and click Apply.
# Ensure that the "Adap.tv ads enabled" checkbox is selected.
==Atlas==
Microsoft Atlas is built on the [http://www.iab.net/vast VAST] IAB ad standard, so you can use this plug-in to run any VAST-compliant ads, not just those delivered by Microsoft.
To use the Atlas plug-in,
# Drag the Atlas plug-in from the Advertising panel onto your video player.
# Enter one or more ad tags in the Atlas properties panel at the top of the rightmost column.
* Pre-roll and Post-roll tabs
** Select the Pre-roll tab to define pre-roll ads to be run before content videos in the selected video player; Select the Post-roll ad to define post-roll ads to be run after content videos in the selected video player.
* Frequency
** Define how many content videos should play before a pre- or post-roll ad.
* Plus sign icon
** Click the plus sign icon to define a new pre- or post-roll ad
* Tag URL
** Enter the Atlas ad tag URL that will return your video ad.
* Trash can icon
** To delete an ad, click a row in the list above, then click this icon.
'''Please note:''' If you enter '''multiple pre- or post-roll ads''', the plug-in will '''randomly''' select one ad from your list of ads when it needs to make an ad request.
'''Sample Atlas ad tag'''
<code html4strict>
http://api.atdmt.com/adserv.api/viewad/sa=ndgtrpnb0110000195ado;sf=VAST_PreRoll_XML_V2;pf=FLV;br=500;strm=1
</code>
'''Passing the ID of the current video to Atlas or another VAST-compliant ad server'''
The KickApps video player can pass the ID of the current video in with your ad request if you include <tt>[mediaId]</tt> in your ad tag, like so:
<code html4strict>
http://api.atdmt.com/adserv.api/viewad/sa=ndgtrpnbado;sf=VAST_PreRoll_XML_V2;pf=FLV;br=500;strm=1?mediaid=[mediaId]
</code>
==DoubleClick for Publishers==
# Drag the DoubleClick plug-in from the Advertising panel onto your video player.
# Enter one or more ad tags in the DoubleClick properties panel at the top of the rightmost column.
* Pre-roll and Post-roll
** Select the Pre-roll tab to define pre-roll ads to be run before content videos in the selected video player; Select the Post-roll ad to define post-roll ads to be run after content videos in the selected video player.
* Frequency
** Define how many content videos should play before a pre- or post-roll ad.
* Plus sign icon
** Click the plus sign icon to define a new pre- or post-roll ad
* Tag URL
** Enter the DoubleClick ad tag URL that will return your video ad.
* Companion
** Enter the URL to a companion display ad. Just before the Doubleclick plug-in plays the video ad that corresponds to this companion ad, it will make this companion ad URL available to a JavaScript function on the page on which the player is embedded.
* Trash can icon
** To delete an ad, click a row in the list above, then click this icon.
'''Please note:''' If you enter '''multiple pre- or post-roll ads''', the plug-in will '''randomly''' select one ad from your list of ads when it needs to make an ad request.
==Google AdSense for Video==
# Drag the Google plug-in from the Advertising panel onto your video player.
# Enter your Pub ID, Host, and Channel in the Google properties panel at the top of the rightmost column and click Apply.
# Ensure that the "Google ads enabled" checkbox is selected.
==Scanscout==
# Drag the Scanscout plug-in onto your video player.
# Enter your Publisher ID in the Scanscout properties panel at the top of the rightmost column and click Apply.
# Ensure that the "Scanscout ads enabled" checkbox is selected.
==Pre-roll==
The Pre-roll Advertising Plug-In enables you to run pre-roll ads against the videos in the selected video player. You define a pre-roll ad by entering a video URL for the ad, and, optionally, a click-through URL.
* Frequency
** Define how many content videos should play in your player before a pre-roll ad should play.
* Video
** Enter a URL of your video ad. The URL should return an <tt>.flv</tt>, <tt>.mp4</tt>, <tt>.mov</tt>, <tt>.m4v</tt>, or <tt>rtmp</tt> stream.
* Link
** Enter a URL for use as a click-through link. When viewers click on the video player while the corresponding pre-roll ad is playing, they will be redirected to this URL.
'''Please note:''' If you enter '''multiple pre- or post-roll ads''', the plug-in will '''randomly''' select one ad from your list of ads when it needs to make an ad request.
You can also use the [http://www.kickdeveloper.com/api/index.php/Events_and_Actions#Video_Component "video ad start" and "video ad end" events] to trigger other behavior, like requesting a tracking pixel before and after your ad runs.
==Post-roll==
The Post-roll Advertising Plug-In enables you to run post-roll ads against the videos in the selected video player. You define a post-roll ad by entering a video URL for the ad, and, optionally, a click-through URL.
* Frequency
** Define how many content videos should play in your player before a post-roll ad should play.
* Video
** Enter a URL of your video ad. The URL should return an <tt>.flv</tt>, <tt>.mp4</tt>, <tt>.mov</tt>, <tt>.m4v</tt>, or <tt>rtmp</tt> stream.
* Link
** Enter a URL for use as a click-through link. When viewers click on the video player while the corresponding post-roll ad is playing, they will be redirected to this URL.
'''Please note:''' If you enter '''multiple pre- or post-roll ads''', the plug-in will '''randomly''' select one ad from your list of ads when it needs to make an ad request.
You can also use the [http://www.kickdeveloper.com/api/index.php/Events_and_Actions#Video_Component "video ad start" and "video ad end" events] to trigger other behavior, like requesting a tracking pixel before and after your ad runs.
[[Category: Widgets & Video Players]]