Creating Players

It is possible to create your own layout for use with the enhanced media player library. In order to use the enhanced media player in your own template there are a few steps that need to happen.

Loading Group and Media Information

Before the API can render a media player or playlist, it first needs some data. The following Javascript methods will load the data required.

// The following method loads a media item Vio.Media.LoadP("27a0704a-b277-46a9-826c-ebf4960463c8"); // The following method loads a group Vio.Groups.LoadP("acd60860-ed4c-456a-85ab-de36c2661ad0");

Creating a Player Target

The PlayerTarget object is at the core of the API. When an event is triggered, the ID is passed to the subscribing functions. This ID can then be used to find the intended target. The reason for this is so that multiple targets can occur on the same page.

// find the element to use for the PlayerTarget var elem = document.getElementById(“playerContainer”);
// Pass the DOM element to the NewTarget function. This function // will return a PlayerTarget object on which options can be set // and events triggered var target = new Vio.Player.NewTarget(elem);

Setting Player Options

Each PlayerTarget has a set of options that effect rendering. The following table lists all the options available.


Option Type Description
target.Options.embedPlayer.showSplash Boolean Should a splash image be shown on the initial load.
target.Options.embedPlayer.splashImage String The splash image to show, if this is left blank it will default to the thumbnail for the selected media item.
target.Options.embedPlayer.playerFormat String The media player to render. The options are "Flash", "Quicktime", "WindowsMedia", "Html5", "Silverlight"
target.Options.embedPlayer.playerQuality String The default media file quality to use when rendering the player.
target.Options.embedPlayer.playerWidth Integer The width of the media player
target.Options.embedPlayer.playerHeight Integer The height of the media player
target.Options.embedPlayer.mediaId String The media id to use for rendering the media player. This is a required item.
target.Options.embedPlayer.groupId String The group id for use with rendering.

Media Info

Option Type Description
target.Options.mediainfo.show_title Boolean Show the title when rendering the media info
target.Options.mediainfo.show_desc Boolean Show the description when rendering the media info
target.Options.mediainfo.show_date Boolean Show the date when rendering the media info
target.Options.mediainfo.date_fmt String The date format string for the media info section


Option Type Description
target.Options.playlist.show_title Boolean Show the title when rendering the playlist
target.Options.playlist.show_desc Boolean Show the description when rendering the playlist
target.Options.playlist.show_thumbnail Boolean Show the thumbnail when rendering the playlist
target.Options.playlist.show_date Boolean Show the date when rendering the playlist
target.Options.playlist.thumbnail_width Integer The width of the thumbnail to display.
target.Options.playlist.thumbnail_height Integer The height of the thumbnail to display.
target.Options.playlist.desc_cutoff Integer The number of characters at which the description is truncated. If this is set to -1 then the whole description will be shown
target.Options.playlist.date_fmt String The date format string
target.Options.playlist.filter String or Regex The filter to apply to the current playlist when rendering. This can be either a string or a regular expression.

Obtaining the Player Targets

You can obtain a list of all target elements on a page using the Vio.Player.GetTargets() method. You can also find a specific target by calling the Vio.Player.FindTarget method.

// If you need to get hold of the PlayerTarget object call // Vio.Player.FindTarget with the ID of the target target.Options.embedPlayer.mediaId="27a0704a-b277-46a9-826c-ebf4960463c8"

Setting DOM Elements for Rendering

The PlayerTarget holds a reference to each DOM element that will have content rendered in it. These elements can appear anywhere on the page.

// find the element to use for the PlayerElement target.PlayerElement = document.getElementById("player");
Property Description
target.Element The element the player target was created against
target.PlayerElement The element in which to render the media player
target.PlayerOptions The element where the player options will be rendered. This is for changing the media player type once the video has started playing
target.MediaInfo The element where the media information will be rendered
target.PlaylistElement The element where the playlist will be rendered
target.PlaylistControl The element where the playlist control will be rendered. This is where the sort options will be place.

Triggering Events to Render Controls

Once the PlayerTarget has been set up, triggering the required render events will cause the player to render.

// Trigger rendering of the media player Vio.Event.Trigger("RenderPlayer", target);
Event Description
RenderPlayer Renders the media player
RenderPlayerOptions Renders the media player options
RenderMediaInfo Renders the media information
RenderPlaylist Renders the playlist
RenderPlaylistControl Renders the playlist control