Media Manager

Our Goals

We have four major goals in the next hour:

  • Introduce Media Manager
  • Put Videos on a web page
  • Manage Videos in Tridion
  • Hack, Crack, and trick out Media Manager

Warning

CSS Tricks, JavaScript hacks, and Internet Explorer are in your future.

Media Manager

The Agenda

Starting in Media Manager:

  • Assets
  • Programs
  • Distributions
  • Outlets

Putting Videos on a Web Page

  • iframes
  • JavaScript
  • Ajax

Putting Videos in Tridion

  • A typical Schema
  • A typical component template

Tricks and Tools

  • jQuery
  • jQuery Plugins
  • Playing with the projekktor API

Starting in Media Manager

It's important to understand the relationship between the four major divisions of Media Manager

Assets: The raw file
(In Tridion, you'd think of it as a component)
Programs: a collection of one or more assets
(In Tridion, you'd call this a page)
Outlets: The presentation of a program
(In Tridion, would be a page or a component template)
Distribution: The combination of Program and Outlet
(In Tridion, this would be a component presentation)

The Big Idea

Media Manager abstracts content and design just like Tridion does.

Starting in Media Manager

Assets

The cool factor of Media Manager is that you don't have to think about codecs, file formats, and browser support.

When you upload your asset, be prepared to fill in a few fields for it

Keywords
Metadata for finding the Asset later in Media Manager
Tags
Your controlled "vocabulary"
People
People that appear in the asset
Location
Where the asset was recorded
Author
Person who made the asset
Copyright
Entity to whom the copyright notice applies
Max Programs
How many times/ways the asset can be used
Available for web Publishing
Whether you can distribute the asset

Pro Tips:

  • Add subtitles, voice overs, backslides, custom events to videos
  • Grab stills from videos
  • Crop images
  • Export your assets to other file types.

Starting in Media Manager

Programs

A program needs some fields, just like an asset:

*If you share the link to a distribution before the program is available, or after it isn't, you're in trouble.

***Maximum views is important because SDL bills you, in part, by the number of times your distribution gets viewed.

Folder Where you store it
Title Title of your program
Description Description of the program
Keywords Metadata for the program
Available from When is the program available?*
Available until When is the program no longer available?*
Maximum Views Number of times the program should be viewed?***

Pro Tips:

  • Use either the available fields, or managing your expirations from Tridion. But definitely not both
  • Only use Maximum Views if you're on a tight budget

Starting in Media Manager

Outlets

Audio Player Plays your Audio
YouTube Connector Connects Media manager to a YouTube Account
Download Lets you download an asset
HTML Gallery Creates a Gallery
HTML Image Shows an image
Flash Player Shows some Flash
HTML5 Player Does the awesomeness
Mobile Player Puts a low quality video for mobile phones

The Big Idea:

You don't get many configuration options with anything other than the HTML5 player.

We're here today for the HTML5 player.

Starting in Media Manager

Outlets | The HTML5 Player

What CanCan't you customize?

Theme: we can actually specify a directory for the CSS
Styling: the buffer color, image, the control bar, image sprites, and all the buttonsCheck the docs
Layering: Layers of individual elements
Layout: Height, width, and the position.
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.
Logo: You can set a logo in the video, as a watermark

Pro Tips:

  • Focus on branding
  • Make fewer, high-quality outlets
  • Name your outlets like your component templates

Starting in Media Manager

Outlets | The HTML5 Player | Customization Tips

Theme: Publish your CSS to a CDN or some public directory.
Clients who want CSS to go through a dev-qa-prod process may get cranky over this.
Styling: Most designers aren't prepared for the customization options that are offered.
Be prepared to answer lots of questions.
Layering: A danger zone.
If HTML5 falls back to Flash (like in an IE browser), the <object>element supercedes all other z-indexing.
Layout: You must provide a height and width using only an integer.
px, %, and em are not accepted
You can change the unit of measurement with JavaScript— so long as you used the JavaScript approach.
Fonts: Designate any fonts that you want— even fonts that are included with typekit.
Color: You must provide color in hexadecimal. RGB, RGBA, and HSLA are not accepted.

Starting in Media Manager

Distributions

You upload an asset and make a program with it, so that you can distribute it with an outlet

The distribution is the only thing that gets viewed by the end user.

shot of an outlet
If you haven't published a distribution, then you won't get a live URL.

Putting Videos on a Web Page

iframes

The iframe and Ajax approach will both use the URL in the distribution window.

The JavaScript approach involves copying and pasting the code.

shot of an outlet

Food for thought:

What's easiest for the developer isn't necessarily easiest for the content author.

Additional interactivity with the video will affect your choice of approach

Putting Videos on a Web Page

iframes

Use this if:

  • You have to deliver in the next 10 minutes.
  • You want to create functionality that allows the end-user to change videos.
  • You want to put the video in a modal window
 <iframe src="http://nationwide.dist.sdlmedia.com/Distributions/
 ?o=DCF7FD8E-E793-4690-B280-9E5493C60B51">
 </iframe>

Pro Tips:

  • Use iframes if you need to allow users to switch out videos
  • Use an outlet that won't change

Putting Videos on a Web Page

iframes | Example

Trust me on this:

  • You need to set a height and width on the iframe (ideally with CSS) — and it should match your outlet dimensions
  • The fullscreen button won't work
  • Iframes don't like being responsive (but it can be done)
  • You can't apply external controls to the video

Putting Videos on a Web Page

JavaScript

Media Manager provides a JavaScript snippet that an end-user can use, a bit like YouTube.

Use this if:

  • You're only going to have one video on a page
  • You want to create functionality that allows the end user to control the video.
  • You want to edit the presentation of the video outside of Media Manager
    • . 
<script type="text/javascript" language="javascript"
src="http://nationwide.dist.sdlmedia.com/Distributions/
embed/?o=DCF7FD8E-E793-4690-B280-9E5493C60B51">
</script>

Putting Videos on a Web Page

JavaScript | Example

Putting Videos on a Web Page

JavaScript | Tame those dimensions

There's a CSS-only way to change the dimensions on that video

Putting Videos on a Web Page

JavaScript | Responsive HTML & CSS

<div class="container">
    <div class="wrap">
        <script type="text/javascript" language="javascript" src="http://nationwide.dist.sdlmedia.com/Distributions/embed/?o=1F2C97BE-DE64-467C-A6D1-3A5DCFE38215"></script>
    </div>
</div>

.container {
    width: 16em;
}
.wrap {
    position:relative;
    overflow: hidden;
    display: block;
    height: 0;
    padding-bottom: 56.25%;
    border: 2px solid black;
    background: gray;
}

Putting Videos on a Web Page

JavaScript | Example | Responsive

Putting Videos on a Web Page

Ajax

Ajax is the undocumented approach. It involves writing some jQuery that calls the video.

Use this if:

  • You have jQuery on the page already, and it gets called in the <head>
  • You want to create functionality that allows the end-user to change videos
  • You want to create functionality that allows the end user to control the video
  • You want to edit the presentation of the video outside of Media Manager
  	$.getScript('http://nationwide.dist.sdlmedia.com/Distributions/
  	?o=DCF7FD8E-E793-4690-B280-9E5493C60B51')

But, there's a bonus technique…

Putting Videos on a Web Page

Ajax | Pointing to a specific element

There's a second approach which allows you to set the target of the element

  	$.getScript('http://nationwide.dist.sdlmedia.com/Distributions/
  	?o=DCF7FD8E-E793-4690-B280-9E5493C60B51&trgt=someAwesomeDiv')

Pro Tips

  • Target a specific element if you think you'll need extra functionality
  • Show videos with different sizes/outlets with this method
  • use the id as a hook for additional CSS targetting

Putting Videos in Tridion

(How to Manage a Media Manager Video)

Managing a Media Manager video in Tridion is fairly straightforward.

Start with a schema

Add a component template

Mix in a little bit of JavaScript

Putting Videos in Tridion

A Typical Schema

You can switch between an iframe, the JavaScript Snippet, and the Ajax approach with a good schema and some supporting JavaScript.
Schema Name Media Manager
XML Name Description Field Type Details
header Video Title Text Plain Text
description Video Description Text Rich Text (3 lines)
embedType Method of Embedding Text list:
  • iframe
  • embed
url Media Manager URL Text Plain Text

Putting Videos in Tridion

A Typical Component Template

@helper videoEmbedUrl(string url){
    return url.Replace("Distributions/","Distributions/embed/");
} 
     	
<figure class="video video--@(Fields.embedType)">
@if(Fields.header != null){
	<h1 class="video__header">
  @Fields.header
  </h1>
}
<div class="video__player player">
@if(Fields.embedType != "iframe"){
	<iframe class="player__iframe" src="@Fields.url">
  </iframe>
} else {
	<script type="text/javascript" src="@videoEmbedUrl(Fields.url)"></script>
}
</div>
@if(Fields.description != null){
 <figcaption class="video__description">
	@Fields.description
 </figcaption>
}
</figure>

Pro Tip:

Use the Template to make the switch between an iframe or the embedding JavaScript

A razor helper to change the url is…helpful

Tricks and Tools

A lot of the tricks around Media Manager revolve around tweaking the outlet, playing with the jQuery events, and digging around in the console.

  • You'll need to use JavaScript or Ajax for any of the cool stuff
  • Don't be afraid of CSS
  • Experience with jQuery is important
  • JavaScript skills will also be helpful

Tricks and Tools

jQuery

Any jQuery that you write needs to happen inside of the MMPLAYERREADY event.

Create your own Media Manager namespace, and initiate it inside of MMPLAYERREADY

$(document).on('MMPLAYERREADY', function (e) {
        mediaManagerMagic.init();
    });


var mediaManagerMagic;
mediaManagerMagic = {
  init: function () {
    var _this = mediaManagerMagic;
    _this.bindUiEvents();
    _this.functions.conjunctionFunction();
  },
  data: {},
  helpers: {}
  bindUiEvents: function () {},
  functions: {}
};

Tricks and Tools

jQuery | Custom Events

You have a handful of jQuery events that propogate up into the container. You can listen to those events and respond accordingly.

Event Description
player-ready Tells you when the player is fully loaded and ready.
This can fire multiple times on a page
show-layer-endstate Tells you when the video has finished playing
Useful if you need to do something when the video is over
show-layer-hover When the mouse is hovering over the video
fullscreen-enter When the video is in fullscreen
fullscreen-exit When the video leaves fullscreen
hide-layer Tells you that a mouse has stopped moving over the player

Tricks and Tools

jQuery | Using Custom Events

Any jQuery that you write needs to happen inside of the MMPLAYERREADY event.

Create your own Media Manager namespace, and initiate it inside of MMPLAYERREADY

Reset a video when it's ended

$(document).on('MMPLAYERREADY', function (e) {
  $(player).on("show-layer-endstate", function (e) {
      setTimeout(helpers.resetVideo(),100);
  });    
});

Make a video autoplay (without the outlet) 

$(document).on('MMPLAYERREADY', function (e) {
  $(player).on("player-ready", function (e) {
      helpers.playVideo()
  });    
});

Tricks and Tools

jQuery Plugins

If you need to be able to switch between an iframed or an Ajaxed approach, use a jQuery plugin!


Before you build a plugin, use what's out there, and make sure that it works for the content author— not just you!


Be sure that your plugins will work with SDL's version of jQuery

<!--insert shameless self promotion-->

There is a Media Manager plugin on Github

Pro Tips

  • Use a plugin that doesn't rely on JavaScript to set parameters
  • data-* attributes are your friend

Tricks and Tools

jQuery Plugins | Media Manager Plugin | Shameless promotion

Tricks and Tools

Projekktor API

I'm sorry, the what?

Media Manager actually uses a third party API for putting videos on a page. If you want to understand the core of media manager, this is it.

Check out http://www.projekktor.com/ for details on how videos actually get put on the page. It's a pretty complex JavaScript library.

Nationwide actually makes use of some functionality in the Projekktor API to do some super serious hackery:


//Reset the video and play again
            restartPlayer: function () {
                var player = projekktors[0]; //target the video directly, since it's in an array
                player.reset();
                player.setPlay();
            },
//fullscreen shenanigans
            openFullscreen: function () {
                var player = projekktors[0];
                player.setFullscreen();
                $player.removeClass("js-fullscreen");
            },
            closeFullscreen: function() {
                var player = projekktors[0];
                //use the jQuery method, because it's easier in this case
                $player.trigger("close-fullscreen");
                $player.removeClass("js-fullscreen");              
            },
//Play at a specific point in the video
            playPosition: function (n) {
                var player = projekktors[0];
                player.setPlayhead(n);
                return;
            },
//create a play function that can accept a position as an argument
            playVideo: function (n) {
                var _this = nwdotcom.mediaManagerHandler,
                    $player = $(_this.data.player);
                if (n) {
                    _this.helpers.playPosition(n);
                }
                $player.trigger("play");
            },
            pauseVideo: function () {
                var _this = nwdotcom.mediaManagerHandler,
                    $player = (_this.data.player);
                $player.trigger("pause");
            },
            stopVideo: function () {
                var player = projekktors[0];
                player.setStop();
            },
//reset the video
            resetVideo: function () {
                var player = projekktors[0];
                player.reset();
            },
            restartVideo: function () {
                var _this = nwdotcom.mediaManagerHandler,
                    $player = $(_this.data.player);
                $player.trigger("restart-asset")
            },
//detroy the player               
            exitVideo: function () {
                var _this = nwdotcom.mediaManagerHandler,
                    $player = $(_this.data.player);
                $player.trigger("exit");
                _this.data.userIntent.watch = false;
            },
            setVolume: function (vol) {
                var player = projekktors[0];
                player.setVolume(vol);
            },
        },

Media Manager

What were we trying to do?

Learn how to trick-out Media Manager

We Learned Media Manager basics

We put videos on a web page

We explored how to manage Videos in Tridion

We added some fun and shiny things, too!
<!--Insert sincere gratitude -->

Thank You!