OSMF Video Player

From KickApps Documentation

The OSMF Video Player is built on Adobe's Open Source Media Framework (OSMF), which means that video players built with it can take advantage of lots of plug-ins for advertising, analytics, and CDNs. The OSMF player is available in the Components tray on the left side of the App Studio. You can also create OSMF-powered players by selecting the OSMF Video Player Template from the Templates tray on the left, or by selecting New > from Video Player Wizard from the New menu in the Widget Manager..

Contents 1 OSMF Video Player Wizard 2 OSMF Plug-Ins 2.1 Add OSMF Plug-Ins 2.1.1 Akamai Basic Streaming 2.1.2 Closed Captioning 2.1.3 GlanceGuide Tracking 2.1.4 MAST 2.1.5 VAST 2.0 2.1.6 VPAID 1.1 2.1.7 Tremor Acudeo 2.1.7.1 About Acudeo 2.1.7.2 Installing Acudeo 3 Content 4 Settings 5 Layout 5.1 Layout Constraints 6 Events 6.1 Standard Events 6.2 Video Player Events 7 Actions 7.1 Standard Actions 7.2 Video Player Actions 8 About the Open Source Media Framework (OSMF) 9 Developers: create OSMF plug-ins

OSMF Video Player Wizard

The OSMF Video Player guides you through the process of picking a video player skin and installing and configuring plug-ins, all in just a few clicks!

1. Launch the OSMF Video Player Wizard
2. Select a player skin.
3. Install plug-ins.
4. Configure plug-ins.
5. Preview and publish.

OSMF Plug-Ins

The OSMF Plug-Ins panel displays the plug-ins installed in the selected OSMF player. Click the Manage Plug-Ins button to add or remove plug-ins for advertising, analytics, and CDNs.

Add OSMF Plug-Ins

1. Select the OSMF Video Player component.
2. Click the Manage Plugins button in the OSMF Plug-Ins panel at the top of the right column.

File:OsmfPlugins.png

1. Click the Install button next to any plug-ins that you'd like to enable for your player. Information on each plug-in follows.

Akamai Basic Streaming

Connects the OSMF player to progressive or streaming videos from Akamai. With this option selected, the OSMF player will use this plug-in to render the content served up by the URL in its Content panel.

Sample RTMP stream rtmp://cp67126.edgefcs.net/ondemand/mediapm/osmf/content/test/akamai_10_year_f8_512K

Closed Captioning

Runs closed captions from an external file, synchronized to the current video. This plug-in uses the DFXP format for closed captions.

With the Closed Captioning plug-in activated per the above,

1. Add a text component to your widget by dragging the Text component from the Components panel on the left onto the stage. Position it wherever you'd like, and make sure to adjust the color of the text so it doesn't blend in with your video under the Fonts panel on the right. Also take note of the name of this text component. You can find it in the Layers panel and in the top bar above the stage, next to the Publish button.
2. Select the OSMF Video Player again.
3. Click "Closed Captioning" in the OSMF Plugins panel.
4. Enter a URL to a Closed Captioning document URL in the input box at the bottom of the OSMF Plugins panel and click Apply.
5. Enter the name of your text component in the Text Area ID field and click Apply.

GlanceGuide Tracking

Sends rich video analytics data into your GlanceGuide account.

With the GlanceGuide Tracking plug-in activated per the above,

1. Click "GlanceGuide Tracking" in the OSMF Plugins panel.
2. Enter your GlanceGuide Account ID in the input box at the bottom of the OSMF Plugins panel.

MAST

MAST is an XML format that describes when and where to run an ad specified in a VAST document. You can think of MAST as a playlist for VAST ads.

With the MAST plug-in activated per the above,

1. Click "MAST" in the OSMF Plugins panel.
2. Enter a URL to a MAST document in the input box at the bottom of the OSMF Plugins panel.

VAST 2.0

VAST] is a standards-based format for describing video ad packages. It can be used in tandem with MAST when multiple VAST ads need to be sequenced within the same player (see the MAST plug-in below). The VAST plug-in enables you to run VAST 2.0-based ads in your OSMF video player.

With the VAST plug-in activated per the above,

1. Click "VAST" in the OSMF Plugins panel.
2. Enter a URL to a VAST ad in the input box at the bottom of the OSMF Plugins panel.

VPAID 1.1

VPAID is a standard format for describing in-stream video ads. The MAST plug-in makes use of this VPAID plug-in when it receives ad packages in VPAID format (see the MAST plug-in below). The VPAID plug-in enables you to run VPAID 1.1-based ads in your OSMF video player.

With the VPAID plug-in activated per the above,

1. Click "VPAID" in the OSMF Plugins panel.
2. Select pre-roll, post-roll, or display ad from the dropdown.
3. Enter the URL to the selected ad creative.

Tremor Acudeo

About Acudeo

"Acudeo is the patent-pending video monetization platform that lies at the core of our publisher advertising solutions and powers our advanced video ad formats. It has a full suite of ad policy management tools including reporting and analytics, ad mediation and failover processing, tracking and advertiser verification and rendering of interactive advertising creatives. This robust feature set provides the level of control that publishers need to maximize the revenue generated by their ad campaigns."

Installing Acudeo

The Acudeo plug-in available in the OSMF Plug-Ins window is for demonstration purposes only. To use the Acudeo plug-in with your own Acudeo account, ask your Tremor representative to activate your account for use with the KickApps OSMF Acudeo plug-in. Once your account has been activated, a new Acudeo plug-in will appear in the My Plug-Ins area of the OSMF Plug-Ins window. Click to install this plug-in, click "Done", then select the Tremor Acudeo entry in the OSMF Plug-Ins config panel, enter your Tremor Ad Policy ID in the input that appears, and click Apply. Your OSMF video player will now run ads from the designated Acudeo ad policy.

Content

Enter a URL to a progressive video download or a streaming video.

Settings

• Scrubber
  • Assign the OSMF Video Player a Scrubber component.
• Volume Control
  • Assign the OSMF Video Player a Volume Control component.
• Scale Mode
  • Stretch
    • Stretch the video horizontally and vertically to fill the whole video screen.
  • Letter Box
    • While maintaining aspect ratio, stretch the video horizontally and vertically until the video touches either the top and bottom sides of the player, or its left and right sides. Fill any negative space with black bars.
  • Zoom
    • Zoom into the video to fill up as much of the video screen as possible without clipping the video.
  • None
• Play on load
• When a video ends,
  • Advance and Play
  • Advance and Stop
  • Return to Start
  • Remain at End

Layout

There are two types of containers: the widget canvas itself (background of the entire widget) is considered a container, and you can also create containers that enclose components within your widget. Like any standard component, containers that you create can be moved around the stage, resized, and styled. The most powerful feature of Containers, though, is their ability to fix the positions of their constituent components via layout constraints, which we'll cover below. To create a container, select multiple components, right-click, and select "Group in new container".

You can configure a container's background color, opacity, border color, border thickness, corner radius, and background image in its Properties panel:

You can also mask content in a container by selecting the Mask Content checkbox at the bottom of the panel above. With masking enabled, components that belong to the container but fall outside its bounds will be hidden. To indicate this, when you're editing a container that has masking enabled in Design mode, and then add a component outside the bounds of the container you're in, that component will be translucent:

Masking is useful for situations in which you want to animate a component into a container after it loads initially.

Layout Constraints

Layout constraints let you anchor components a certain distance away from the sides and axes of their containers. Components with layout constraints enabled maintain their offset distances when their containers are resized. To set layout constraints, double click on your container, then single click on a component within it. The Layout Constraints panel will appear:

The checkboxes along the top side of the square in the Layout Constraints panel can be used to anchor the selected component to the left, vertical center, and right sides of its container. The checkboxes along the left side of the square can be used to anchor the selected component to the top, horizontal center, and bottom sides of its container.

When you select a checkbox, a text input field appears across the box from it. The number in this field represents the offset distance, in pixels, from the selected side of the container. For example, this is what it looks like when you anchor to the left side:

If you then resize this container, the component maintains its distance from the left side:

Similarly, you can anchor a component to the top of its container, and it will maintain its distance from the top when its container is resized:

You can also anchor components to the horizontal and vertical center lines of their containers. This component is anchored to the horizontal center of its container. It maintains its distance from the horizontal center when its container is resized.

This component is anchored to the vertical center of its container. It maintains its distance from the vertical center when its container is resized.

Components anchored to opposite sides of their containers expand and contract to maintain their offsets. Below is a component anchored to both the left and right sides of its container. Note how it expands to maintain its distances from the left and right sides.

The component below is anchored to both the top and bottom sides of its container. It contracts when its container is resized.

Events

Standard Events

• Click
• Component hidden
• Component loaded
• Component shown
• Double click
• Mouse down
• Mouse up
• Roll out
• Roll over

Video Player Events

• Connecting to video server
• Connected to video server
• Buffering start
• Buffering complete
• Media change
• Media end
• Media list loaded
• Media paused
• Media percent complete
  • Specify the percentage of playback at which this event should be fired
• Media playing
• Media start
• Media time elapsed
  • Specify how many seconds of playback should occur before firing the event (whole seconds only; no decimals)
• Mouse over
• Request failed georestriction policy
• Request passed georestriction policy
• Video ad end
• Video ad start

Actions

Standard Actions

• Drag/Stop Drag
• Set depth
• Show/Hide
• Tween Blur
• Tween Color
• Tween Drop Shadow
• Tween Glow
• Tween Property
• Update Property
  • For a listing of all properties on KickApps components, see our Properties Reference.

Video Player Actions

• Change Selection
• Fullscreen
• Mute
• Play/Pause
• Set Media URL
• Video ad end
• Video ad start

About the Open Source Media Framework (OSMF)

Adobe's Open Source Media Framework (OSMF)] "enables developers to easily assemble pluggable components to create high-quality, full-featured playback experiences." KickApps has partnered with Adobe to offer OSMF-driven video players in the App Studio.

Developers: create OSMF plug-ins

If you’re an Open Source Media Framework developer, you need to join the KickApps OSMF developer program. The program makes it possible for the first time for developers to easily distribute their OSMF plug-ins to over 100,000 publishers and Flash video player developers at some of the largest brands and media companies around the world.

If you have an OSMF plug-in or are interested in developing one, please email your contact information and a short description about your OSMF plug-in to osmf@kickapps.com and we'll work with you to get your plug-in added to our OSMF plug-in list.