Options for Player Customization

This topic provides an overview of your options in customizing the look and functionality of your Video Cloud players.

Video Cloud gives you as much control as possible over the look and feel of the interactive experiences that deliver your media to your users. Depending on your customization needs, the skills you have available, and your account's Video Cloud edition, you have several different approaches available to you:

• Watch Video Tutorial: Styling Players. This video tutorial shows how you can use the style editor to customize the appearance of your video players quickly and easily.
• Customize a standard player’s look in the Publishing module. This approach doesn't require any technical knowledge at all. You just need to be able to use the WYSIWYG styles editor to change the player's look.
• Use BEML to create custom player templates from standard components. This approach doesn't require programming knowledge. It does require some comfort with XML and some visual design skills to turn BEML's configurable components into a good-looking player, although modifying an existing player template can ease you into the design process.
• Add plug-ins to your smart players in the publishing module. Add SWF plug-ins to your Flash players and JavaScript plug-ins to your HTML players in the Publishing module. This requires programming knowledge to create the SWF plug-in for the Flash mode of the smart player, and the JavaScript plug-in for the HTML mode of the smart player, but deploying the plug-in is simply a matter of adding the URL of the plug-in to your player settings.
• Add custom components to a BEML player template. This combines the skill requirements of the previous two approaches; however, it has the advantage that once your BEML player template contains the custom component, you don't need to add it separately to each player instance that uses the custom component.
• Use the Flash-only Player APIs to create custom experiences for Flash players, or use the Smart Player API to create custom experiences for both Flash and HTML modes of the smart player. Coding using these APIs offers the greatest flexibility, but also requires the highest level of programming knowledge and design skill.

You can in many cases combine two or more of these approaches, but note that custom player templates created with BEML are available only to Video Cloud Pro and Enterprise publishers. Let’s take a look at the capabilities of these Video Cloud player customization features.

Setting styles in the Publishing module

Every player, whether it's created from one of our many standard player templates or from a BEML custom player template, can be viewed and edited in the Video Cloud Studio's Publishing module. The Edit Styles view in the Publishing module lets you customize each component of your player in practically infinite combinations of colors and styles. For example, you can specify particular colors for a player's buttons, with different colors for the button's text and icons, and different colors for the button's normal, rollover, and disabled states. You can do this using a clear WYSIWYG user interface that requires no programming knowledge or special syntax. Read more about styling a player in the Publishing module.

Creating custom players with BEML

The Video Cloud Experience Markup Language (BEML) was designed to give Video Cloud publishers absolute control over what appears within their media experiences. While the standard Video Cloud player templates let you get your videos programmed and up on the web with minimum fuss, BEML opens up a wide world of template development to you without requiring programming or technical knowledge beyond basic understanding of tag or markup languages like HTML.

With BEML, you can specify exactly which Video Cloud UI elements appear at what size and at what position within a player. You can also easily create players with liquid layout, where elements re-size and re-position based on different embedded dimensions, using the tags available in BEML. Through a simple binding syntax, template designers can also tie different elements together within their players, surfacing data like video titles within labels based on elements in a list or the currently playing video. BEML also offers the ability for template designers to override graphic themes or styles within the players, force branding in all players, set new values for labels, or control the actions that result from clicks of different buttons.

Player designs that otherwise would require custom ActionScript or JavaScript development can instead be realized through BEML and the default BEML components offered by Video Cloud. Read more about creating custom player templates with BEML.

Theming and styling graphics

User interface components that appear in Video Cloud players are stylable through BEML, the Publisher module in the Video Cloud Studio, or through runtime API interaction. Through these interfaces, the graphic look of media experiences can be made to vary widely from publisher to publisher or from one player to another as desired.

Video Cloud offers three main themes for all of its components, Deluxe, Flat, and Minimal. The theme for each complex UI component, like List or VideoPlayer, can be set through the BEML template, or the theme for an entire player may be set through the Publishing module player style settings. These same style settings offer an interface for altering individual colors for all aspects of a component, from rollover states of text to the background of list items.

Colors can also be set through the CSS supported by the player. This can be included within the BEML template itself, or loaded from an external style sheet. These colors can be set at runtime as well through the player’s JavaScript or ActionScript API.

The Video Cloud UI components can also be re-skinned with publisher-defined graphics that are specified within the BEML template. The video player background, icons, and button skins can all be updated with graphics that allow the Video Cloud player to be seamlessly integrated within a publisher’s site. You can also create custom themes for many BEML components.

• Read more about using themes and styles in BEML templates.
• Read about custom skins for BEML components.
• Read about custom themes for BEML players.

Localizing labels

Video Cloud players are localizable in the many different geographies into which our customers deliver their media. Using the Publishing module, you can configure your player to use translated labels in six different languages for all elements out of the box. In addition, you have complete control for setting these labels, using either your own XML file of translations or the BEML for your players.

If you need to change all labels in a player, you can simply provide translations within an XML file that matches the form required by the player. You can point to this file in the player's settings in the Publishing module (in which case you can optionally provide different translations for different player instances of the same template), or you can enter the path to the file in the BEML that defines the player template (in which case all instances of the player will receive the same default custom translation).

In addition, the BEML supports modifying the text of individual labels, as well as the creation of new Label elements in the BEML with their exact text, if that is required. Read more about localizing players.

Extensibility through the Player API

As much functionality as the Video Cloud player possesses out of the box, we are very aware that some publishers require an even greater degree of customized appearance and behavior. In order to provide players to publishers that have the capability to be extended and added to in the easiest manner possible, we have opened up a large amount of the player internals and surfaced hundreds of API commands that developers (either publishers or technology partners), can hook into to create the extra functionality or custom experiences required. Read about getting started with the Flash-only Player API for coding Flash-only solutions, and the Smart Player API for solutions for players in Flash, where supported, and otherwise in HTML players.

JavaScript and ActionScript interfaces for Flash players

The Video Cloud player is delivered to the desktop using Flash Player and supports both a JavaScript and an ActionScript interface into its functionality. The two interfaces offer the same objects and methods, so developers can work with whichever language they are most comfortable and familiar. Because the two languages both derive from ECMAScript, and because the API surfaced by Video Cloud for each language is as similar as possible in implementation to the other, moving from one language to the other when working with the Video Cloud player is a relatively straightforward process.

Both API implementations of the Flash-only Player API offer synchronous communication with the player — methods can be called directly and responses received. For methods requiring asynchronous calls to the backend, you can set up listeners to receive notification when data is loaded. The same event model is used for any type of event that is broadcast from the player — and there are dozens offered, from user interaction to media playback to changes in player view.

JavaScript interfaces for smart players

The Smart Player API allows you to create custom dynamic solutions in JavaScript that work with both Flash and HTML players. This API facilitates development of solutions for Video Cloud smart players, those players that detect their environment, and serve videos with Flash players where supported and installed, or otherwise serve videos with HTML players. The Smart Player API exposes objects, methods, events, and types for coding additional functionality for your Video Cloud smart players and uses asynchronous communication. Use the Smart Player API to create dynamic solutions and extend the functionality and behavior of players created from the standard templates in the Video Cloud Studio.

Additional functionality surfaced

The Video Cloud Player API not only allows control and access over standard features of the player, like media playback and content loading, but it also surfaces additional functionality not available without the API. Such functionality includes modules to allow for catalog searches, synchronized captioning, and firing of cue points set in media.

By using the API and these functional modules, publishers can add features to their players that are not available in the out of the box player templates. Publishers, on their own or through our Video Cloud Alliance partnerships, have added features like catalog searches, subtitling, calls to third party reporting services, custom advertising integrations, and results from recommendation engines. The API can be used to create entirely custom user experiences with unique and branded UIs where only the video playback area is managed by Video Cloud.

DOM access to player

Not only does the Video Cloud Player API offer new features through means of higher level functional modules, but it also provides access to the document object model of the player as specified in the template BEML. By traversing the DOM, developers can reference layout and UI controls in a player and re-write the experience at runtime, adding, removing or replacing completely the view presented to the user.

Each Video Cloud UI component exposes a number of common display methods, like those for positioning and sizing, as well as methods unique to each specific control. Lists can be populated with different data, items within a list can surface different aspects of the data, button labels can be altered and new images may be loaded in. In addition, all UI elements may be re-styled at runtime as well, for purposes of advertising or re-branding based on context. If custom UIs are included, you can access these through the Player API in the same ways as the standard Video Cloud components.

Plug-In Architecture

To extend the functionality of the Video Cloud player, you are not required to create a larger shell application and embed the player as a component in order to interact with it and add to its feature set. Instead, you can take advantage of the Video Cloud player's plug-in model, which allows additional functionality, developed by customers and partners, to be loaded into the player as needed. By programming against the Video Cloud Flash-only Player API within a SWF that is loaded into the player at runtime, or by programming against the Video Cloud Smart Player API and loading two plug-in files with similar functionality, a SWF file for the Flash mode of the smart player and a JavaScript file for the HTML mode, developers can extend the capabilities of the player in whatever environment it is delivered, on a publisher’s site or through viral distribution. These plug-in SWFs and JavaScript files can be specified for all players through a template’s BEML, or can be added to individual player instances through the player settings in the Video Cloud Studio Publishing module. Read about creating custom player components and adding custom components to a player template.

Modules for non-visual functionality

For functionality that does not require rendering of a visual component, the Video Cloud player offers the concept of plug-in modules. Examples would include listening to player events and sending data to a backend for custom reporting, controlling the related media surfaced in the player menu using a third-party recommendation engine, or determining renditions of video to present to user’s based on embed environment. Modules can be added for all player instances of a template through a special tag in the BEML template, or they can be added to individual player instances.

Binding in BEML is also supported for plug-in modules for Flash players so that other elements in the player may bind to values surfaced in the plug-in. In a similar way, public methods available in the plug-in SWF can be invoked by other components in the player, as specified in the BEML binding. Using this binding feature, buttons defined elsewhere in the Video Cloud player may invoke custom plug-in methods when clicked, and label text can be transformed using plug-in methods.

SWFLoaders for custom UI and skinning

For additional functionality in the Video Cloud player that requires rendering of a visual component, such as a custom UI that presents playlists to the user, a unique interactive overlay that is placed over the video screen, or components that surface interfaces with third party technology like a Twitter feed or instant messaging, the BEML specification provides a SWFLoader tag that allows a developer to define where a SWF will be loaded, positioned and sized within context of the rest of the player. SWFs can be developed in such a way as to be included within liquid resizing of the player so that as the player is resized and its internal components resized and repositioned so is a SWFLoader SWF. Full Player API access is granted to these SWFLoader SWFs, just as they are with plug-in module SWFs.