Create and publish your first player

Last updated on Sept. 30, 2009

Like for videos and channels, Bits on the Run offers dedicated management for video players. This is a powerful feature, since a player is the hub where playback, branding, sharing, advertising and analytics come together. This tutorial introduces the basic settings of players, both in terms of looks and behaviour.

Creation

Creating a new player is a breeze: simply go to the Players tab of the CMS and hit the Add a Player button.

You now enter the screen where all player settings can be changed. When you change them and and press their Save buttons, your new settings are instatnly reflected in the player Preview at the bottom of the page.

Layout

The top left settings on the page are for the player Layout. Here you can set:

The player name (so you can recognice it in the CMS).
The overall width and height of the player (in pixels).
The controlbar position (above the video or below the video).
the playlist position (above, to the right or at the bottom) and _ playlist size_ (in pixels).

Player layout settings

It is important to understand how the controlbar and playlist affect how much pixels are actually available for the video. The actual width and height of the video is the overall width/height minus the space taken by the controlbar and/or playlist. So if you have a player with bottom controlbar that is 640x500 pixels, the actual video dimensions are 640x480 pixels (the default controlbar is 20 pixels high).

Note that a playlist is only interesting if you publish this player with a Channel (example). If you publish the player with a single video, the playlist will contain one entry and look very empty!

Branding

Below the layout settings, you'll find those that can be used for branding the player. Change them to make the player fit your website's style and color scheme:

The skin dropdown allows you to pick from a list of pre-built player styles.
The colors boxes allow you to change the background color, button colors and mouse rollover colors of the player.

Player branding settings

When picking colors, always make sure to use enough contrast between the background and the icons!

Behaviour

The top right form contains some settings for changing the behaviour of the player:

With automatically start turned on, the video will instantly play when a visitor enters the page. Use with caution!
The display click can also be set. By default, the video starts/pauses when a user clicks the display, but you can also make the player go fullscreen, make it (un)mute or make it follow the Link property of your video.
The repeat playback option allows you make the player endlessly repeat a video. If you embed a channel with this player, you can also opt to either play the entire channel once or endlessly loop the currently playing video in the channel.
The dock switch allows you to display the more advanced buttons (such as those for the HD switch or sharing) in the so-called dock, on top of the video. Buttons in the dock are larger and clearer than those in the controlbar.
The stretch videos option allows you to set how videos that do not perfectly fit the player will be stretched. See this image for an explanation:

Stretching options

Sharing & Embed options

the show embed button let's you show a embed button on either the control bar or over the video, depending on your dock settings, with the embed code for your video. From the options you can select all your different players. This allows you to select a different player, for example a player with more prominent branding, to be used by your audience on their website. This also enables you to share a lower resolution video than you are currently showing to cut down on your traffic costs.
the show share button enables the sharing plugin for the player, either in the controlbar or in the dock. With the sharing plugin your views can directly publish your video on their Facebook and MySpace pages, Twitter about them or e-mail them to others.

Longtail Channel code & Custom flashvars

The last two options offer more advanced features of the player. They go beyond the scope of this tutorial, but here's links to more info:

Embedding

When you're satisfied with your player, it is time to actually use it to publish videos on your website. Therefore, go to the settings page of the Video or Channel you wish to publish. In the Embed Codes block, you'll find the new player in the Players dropdown box. Select it, click the yellow Regenerate button and copy-paste the resulting embed code to your site to see your videoplayer in action.

Uploading step-3d