by

SDL’s Media Manager Outlets: An Introduction

Reading Time: 3 minutes

For the last few months, I’ve been doing a substantial amount of front-end work on SDL’s Media Manager tool. While you can find a pretty decent amount of information on Tridion via blogs and stack exchange, you won’t find much on Media Manager. Let’s start by introducing outlets.

Media Manager for Tridion People

The biggest hurdle for Media Manager is the terminology. What we should understand, though, is that we have new words for old concepts:

  • Tridion separates content and the presentation of that content with components and component templates
  • Media Manager separates content and the presentation of that content with programs and outlets
  • Tridion encapsulates separate, but unique pieces of content in pages
  • Media Manager encapsulates separate, but unique pieces of content in programs
  • Tridion merges content and presentation into a component presentation
  • Media Manager merges content and presentation into a distribution

Media Manager is just as discrete with its management of multimedia  as Tridion is with content. The two products use different terms to say and do the same things.

The Types of Outlets

Now, unlike in Tridion, where you can have an infinite number of component templates for a given type of content, you have a set number of outlets, that can only be used for certain multimedia types:

  • YouTube : Connects Media Manager to a single YouTube Channel and lets you upload videos directly to it
  • Scala : Lets you schedule and manage transmissions to digital signage displays.
  • Flash Player: Puts your video, audio, or images into a flash player
  • HTML5 : Puts your video into an HTML5 player with a flash fallback
  • Image : Shows you an image
  • Audio: Puts your audio into an HTML5 audio player
  • Download: Lets the end user download an asset
  • Gallery: Creates a gallery of your assets.

Customizing Outlets

Even though there’s a lot of outlets to choose from, the only one we can really customize is the HTML5 player. Despite the one customizable outlet, we actually get a lot of options within it. Let’s dive in!

Customizing the player

Customizing the player is synonymous with “skinning” or “theming” it. Here are the various options we have for skinning the player:

  • Theme: we can actually specify a directory for the CSS
  • Styling: the buffer color, image, the control bar, image sprites, and all the buttons
  • Layering: I always tell clients to not change these options, but if they want, they can change the z-index for most of the major elements in the player
  • Layout: Height, width, and the position. You must provide a height and width using only an integer. px, %, and em are not accepted
  • Fonts: you can designate font family, font size, font weight, text shadows and text transforms
  • Color: colors for the backgrounds, the text, and hover colors. You must provide color in hexadecimal. RGB, RGBA, and HSLA are not accepted.
  • Logo: You can set a logo in the video, as a watermark

The outlet doesn’t just give you skinning options. You can actually control the user interactions as well:

  • Behavior: autoplay the video, determine the location of the player, enable custom events, allow a fullscreen button, show the controls, and show a video thumbnail
  • Configuration: Though not yet implemented, there will be the options for a share button and embedding the player
  • Development: you can enable caching and debugging, both of which are super useful.

Customizing the interactions

While you can set a few behavioral controls at the outlet level, there’s two really cool sets of features that occur on the client-side, too. Media Manager uses jQuery, so if you’re familiar with jQuery, we have a few ways to play around with the fully rendered video:

Events fired by the player

  • show-layer-hover: tells you when the mouse is hovering over the player
  • hide-layer: fired when the mouse stops moving over the player
  • show-layer-endstate: fires when the last item has finished playing.
  • player-ready: fires when the player is loaded and ready to give you a video
  • fullscreen-enter: fires when the player is in fullscreen mode
  • fullscreen-exit: fires when the player leaves fullscreen

Events fired by the page

  • MMPLAYERREADY: you’ll want to try $(document).bind("MMPLAYERREADY",someFunction). This fires only once, when the player is first loaded into the document.

The Big Idea

Media Manager looks wildly different at first. In truth, it shares many of the same concepts from Tridion, and they’re especially well-expressed in the outlets. There are a wide variety of options for making a video look customized and branded for your site, if you’re willing to explore them. Not only that, if you’re comfortable with jQuery, there’s ways to manipulate aspects of that video in the browser session, too.