Video Player

From KickApps Documentation

The video player can play videos in the following formats: .flv, .mp4, .mov, .m4v, .f4v, and rtmp streams. It can also play videos from YouTube (just paste the URL of a YouTube page into the video player's Content panel). The video player also supports mRSS feeds, XML (via the Custom List), and the URLs of KickApps video play pages.

Though the video player can be used without any controls by having its auto-play setting enabled, it is typically operated by a scrubber, volume control, and buttons programmed (via Actions) to play and pause the video, as well as to change to the previous and next videos in the video player's feed or playlist.

Contents 1 Content 2 Properties 3 Layout 3.1 Layout Constraints 4 Events 4.1 Standard Events 4.2 Video Player Events 5 Actions 5.1 Standard Actions 5.2 Video Player Actions

Content

• Feed
  • Select a feed saved in the Feed Builder
• Playlist
  • Create a playlist from your KickApps videos
• Feed/Media URL
  • Enter the URL to an mRSS feed, a video file, a KickApps video play page, or a YouTube video page

Properties

Properties are configurable aspects of a component that let you customize the way it looks and how it works by changing their values in its configuration panel in the App Studio. You can also use JavaScript to change widget properties after the widget loads on a page using the setComponentProperty() method method of the Widget JavaScript API. Finally, you can use widget property values in Actions using our bracket literal syntax. For a listing of all properties on KickApps components, see our Properties Reference.

Scrubber

Select a Scrubber component from the dropdown. If the dropdown is empty, add a Scrubber to your widget by dragging a Scrubber component from the Components panel on the left.

Volume Control

Select a Volume Control component from the dropdown. If the dropdown is empty, add a Volume Control to your widget by dragging a Volume Control component from the Components panel on the left.

Playback Options

Play on load

Begin playing the first video in the video player's feed or playlist as soon as the player loads.

Auto-play

When one video finishes playing, play the next video in the video player's feed or playlist.

Auto-advance

When one video finishes playing, advance to the next video in the video player's feed or playlist, but do not play it.

Live Stream

The player should anticipate a live rtmp stream instead of its usual progressive downloads.

Aspect Ratio

Auto

Automatically detect the current video's aspect ratio and expand the video as much as possible while maintaining its intrinsic aspect ratio until it touches the top and bottom, or left and right sides of the video screen.

Stretch or shrink to fit

Stretch or shrink the video to conform to the dimensions of the video player.

Zoom to fit

Zoom in or out on the video until it fills up the video screen.

16:9

Expand the video as much as possible while maintaining a 16:9 aspect ratio until it touches the top and bottom, or left and right sides of the video screen.

4:3

Expand the video as much as possible while maintaining a 4:3 aspect ratio until it touches the top and bottom, or left and right sides of the video screen.

Show loading icon

Choose whether to show a small swirling animation while the video is loading

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