Brightcove Developer Training Bob de Wit © 2008 Brightcove, Inc. All rights reserved. 3 Developer Training Provides a comprehensive overview of the extensive

Brightcove Developer TrainingBob de Wit

© 2008 Brightcove, Inc. All rights reserved. 3

Developer Training

Provides a comprehensive overview of the extensive programming capabilities of the Brightcove platform and how to use them in creating customized experiences

BEML

Media API's

Player API's

Designed for developers with JavaScript or ActionScript experience


Introductions


Schedule

Start on time, end on time9:00 – 5:00ish

15 minute break in the morning and afternoon

1 hour for lunch


Agenda

Section I: Brightcove Developer Basics - MorningBrightcove Service Platform ComponentsThe Studio: Videos, Playlists & Players

Customizing Players - MorningBEMLThe Player API

LUNCH

The Media API - AfternoonThe Read Methods

Metadata, CMS Integration, SEO, …

The Write Methods

Custom Upload Apps, UGC, …


Set Up

Brightcove Accounthttp://studio3.brightcove.com

Login: [email protected]@training.com

Password: Training

Sandboxhtpp://localhost

Section I: Brightcove Developer Basics


Section I: Brightcove Developer Basics

In this section:The workflow of the service platformCreating a Brightcove experience in the Studio

• Location of the main settings for the components

• How to upload content

• How to set metadata using in the Studio

• How to create playlists and players

• How to enable access to the APIs

• How to style a player

• How to get the player publishing code

Referencing players, playlists and videos

The workflow of the Brightcove Service Platform


The Brightcove Service Platform

Your Web Server Brightcove

Admin ClientUser

CDN


The Brightcove Service Platform : Media Upload


Admin ClientUser

CDN

storage

1

2




Admin ClientUser

CDN

storage

1

2

transcoding3




Admin ClientUser

CDN

storage

1

2

transcoding3CDN XFer

4


The Brightcove Service Platform: Player Creation


Admin ClientUser

CDN

PlayListPlayer+ Settings

1


The Brightcove Service Platform: Player Publishing

Your Web Server

Player Embed Code

Admin ClientUser

1

2 Web PageHTML, JS, PHP, ASP, JSP, …

Brightcove CDN


The Brightcove Service Platform: Viewing

Your Web Server

Page Load

Admin ClientUser

1

Brightcove CDN



Your Web Server

Page with embedded BC player

Admin ClientUser

2

Brightcove.com



Your Web Server

Player ID Request to brightcove

Admin ClientUser

3

Brightcove CDN



Your Web Server

Player + Metadata sent to user

Admin ClientUser

4

Brightcove CDN



Your Web Server

CDN Request for video

Admin ClientUser

5

Brightcove CDN



Your Web Server

Video streamed/loaded from CDN

Admin ClientUser

6

Brightcove CDN

Creating a Brightcove Experience in the Studio


Creating A Brightcove Experience in the Studio

Uploading Content

Content Settings & Metadata

Creating a Playlist

Creating A Player

Associating A Playlist with A Player

Player Settings

Styling A Player

Publishing A Player


Upload Content: Using the Studio Interface


Content Settings & Metadata: Basic Presentation


Content Settings & Metadata: Economics & Distribution


Content Settings & Metadata: Scheduling and Geo Filtering


Content Settings & Metadata: Logo Overlay


Playlist Creation & Settings


Player CreationCheck this for

access to the APIs

A high number of support calls come in simply A high number of support calls come in simply because this setting has not be selected!!!because this setting has not be selected!!!


Player Settings


Player Settings


Player Settings


Player Settings


Player Customization

Best PracticesConsider the use of the player

Full screen? Language? Domain Restricted?

Geo restricted? Syndicated? Sync with page content?

Widgets? Playlist? Flash Embedded?

Each of these settings in the Player configuration has impact on the Player behavior and availability

Choose the appropriate Player Template


Standard Player Templates






Player Styling in the BC3 Studio Style Editor


Player Publishing

Exercise 1: The Brightcove Studio


Exercise 1: The Brightcove Studio

The goal of this exercise is to create a player in the Studio

1. Upload a Video

2. Create A Playlist

3. Create A Player

4. Style A Player

5. Publish A Player

GuidelinesYour account: www.brightcove.com

Videos are located in C:\XAMPP\Videos

Referencing Players, Playlists and Videos


Component IDs

Are Unique IDs

Enable you to control experiencesQuickly

Dynamically

Add your own selection logic

…

Independent of the development language used

Are subject to the settings configured for that component

Are NOT the Reference ID field in the video metadata

API access


Getting the ID


The ID in Player HTML Publishing Code

<embed src="http://c.brightcove.com/services/viewer/federated_f9/1847353697?isVid=1&publisherID=1705665024" bgcolor="#FFFFFF" flashVars="playerID=1847353697playerID=1847353697&domain=embed&" base="http://admin.brightcove.com" name="flashObj" width="486" height="412" seamlesstabbing="false" type="application/x-shockwave-flash" allowFullScreen="true" swLiveConnect="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>


The ID in Player JavaScript Publishing Code



<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

<object id="myPlayer" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF" /><param name="width" value="486" /><param name="height" value="412" /><param name="playerID" value="1315753393" /><param name="playerID" value="1315753393" /><param name="isVid" value="true" /></object>




The ID in Player ActionScript Publishing Code

public class BrightcovePlayer extends Sprite {

private var bcPlayer:Object;

public function BrightcovePlayer() {

init();

}

private function init():void {

var config:Object = new Object();

// change the playerID to load a different player

config["playerID"] = 1911416498;config["playerID"] = 1911416498;

config["width"] = 650;

config["height"] = 630;


Assigning Content To A Player using IDs

For a single videosingle video in a Single Video templateSingle Video template: <param name="@videoPlayer" value="123456" />

For a single videosingle video, using its reference IDreference ID: <param name="@videoPlayer"

value="ref:myVid12345" />

For one playlistone playlist in a multi-playlist templatemulti-playlist template: <param name="@playlistTabs" value="123456" />

For multiple playlistsmultiple playlists: <param name="@playlistTabs" value="123456,

7891011" />

Section II: Customizing Players


Section II: Customizing Players

In this section:What BEML is

• The elements of BEML

• Creating a simple BEML template

• Localizing a player with BEML

• Data binding

The Player API• The Player API and JavaScript

• The Player API and ActionScript

Advanced players


What is BEML?

BEML

Brightcove Experience Markup Language

Brightcove's system for creating custom player

templates, defined in an XML template file that you can

upload using the Publishing module.


Where to use BEML

A player is specified by an XML document called a player template

Brightcove gives you the ability to create custom player templates

Once you have created the XML document that specifies your custom player template, add it to your Brightcove account using the Publishing module.

Once the custom player template is added, you can use the Publishing module to create as many players as you want using the same template

https://help.brightcove.com/publisher/docs/publishing/create-template.cfm

https://help.brightcove.com/publisher/docs/publishing/create-template.cfm


Creating A Player Template


BEML Code Validation


BEML Code Validation

Who can spot the error?

The Elements of BEML


The Elements of BEML

The XML you use in a player template is defined by the document type definition (DTD) for the Brightcove Experience Markup Language (BEML).

Each element in a player template defines some visual or non-visual aspect of a player.

The main elements in a player template include:LabelsThemes and StylesLayoutsComponentsModules

http://admin.brightcove.com/dtds/beml_rt.dtd

http://admin.brightcove.com/dtds/beml_rt.dtd


BEML = XML!

BEML is an XML document

Primer on XML, here are a few basic resources:Extensible Markup Language (XML) at the W3C (http://www.w3.org/XML/)

The XML FAQ (http://xml.silmaril.ie/)

XML at Wikipedia (http://en.wikipedia.org/wiki/XML)

http://www.w3.org/XML/

http://xml.silmaril.ie/



http://en.wikipedia.org/wiki/XML




BEML: UI Elements


BEML: Labels

Labels element: Customize and localize text

Can customize the text of every label in your playerStyling

Branding

Promotion

Other

Can create a player with labels in most languages


BEML: Themes

Theme element: Customize look and feel

Can customize the look and feel of your custom Brightcove players

Set a default theme or style for the entire player template

For example, set the theme to Deluxe, Flat and Minimal or the style to Light or Dark

Set a custom global style, using a Style element to point to an external CSS file.

Set styles for individual components using Style elements with in-line CSS.

https://help.brightcove.com/developer/docs/playerapi/beml-themes.cfm#overall

https://help.brightcove.com/developer/docs/playerapi/beml-themes.cfm#overall

https://help.brightcove.com/developer/docs/playerapi/beml-themes.cfm#externalCSS

https://help.brightcove.com/developer/docs/playerapi/beml-themes.cfm#externalCSS

https://help.brightcove.com/developer/docs/playerapi/beml-themes.cfm#inline

https://help.brightcove.com/developer/docs/playerapi/beml-themes.cfm#inline


BEML: Layout

Layout element: Customize positioning

Control which UI elements are includedincluded in a player and where they are positionedpositioned within the player

Canvas

HBox

VBox

Grid


BEML: Layout

CanvasThe simplest of the layout boxesChild elements in a Canvas are positioned absolutely within the canvas box at the (x, y) position specified in the child element

HBoxA horizontal box that lays out all its child elements horizontallyChild elements in an HBox are positioned sequentially from left to right, with each child element being placed directly to the right of the preceding child element, with an optional gutter between

VBoxA vertical box that lays out all its child elements verticallyChild elements in a VBox are positioned sequentially from top to bottom, with each child element being placed directly below the preceding child element, with an optional gutter between

GridA layout box that allows for a more complex layoutChild elements laid out in columns and rows


BEML Exercises

Go to the BEML Section in the Sandbox Top MenuBC3Lingo - Brightcove3 UI Translation ToolSimple BEML PlayerLocalizing A Player With BEMLLocalized Player with BEML + External XMLBEML Compact Tabbed PlayerBEML Localization XMLBEML Custom Example 1BEML Custom Example 2

After this, we’ll take an in-depth look at some of the features used in these templates

Creating a simple BEML template


Creating A Simple BEML Template

<Runtime>

<Theme name='Deluxe' style='Light'/>

<Layout>

<VBox padding='3'>

<VideoPlayer id='videoPlayer'/>

</VBox>

</Layout>

</Runtime>

Specify 486 x 412 Pixels Size


Creating A Simple BEML Template - Result

Localizing a player with BEML


Localizing A Player With BEML

<Runtime>

<Theme name="Deluxe" style="Light" />

<Labels>

<label<label key="controls play" key="controls play">>Go!Go!</label></label> </Labels>

<Layout width="486" height="416">

<VBox padding="3">

<VideoPlayer id="videoPlayer" /> </VBox>

</Layout>

</Runtime>


Localizing A Player With BEML – External XML

<Runtime>

<Theme name="Deluxe" style="Light" />

<Labels <Labels file="http://your.site.com/example.xml" file="http://your.site.com/example.xml" />/>

<Layout width="486" height="416"> <VBox padding="3">

<VideoPlayer id="videoPlayer" />

</VBox>

</Layout>

</Runtime>


Localizing A Player With BEML – External XML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <Labels xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">



<label key="controls play">PLAY</label> <label key="controls play">PLAY</label>

<label key="controls pause">PAUSE</label> <label key="controls pause">PAUSE</label>

<label key="controls menu">MENU</label> <label key="controls menu">MENU</label>

<label key="controls play tooltip">Play</label> <label key="controls play tooltip">Play</label>

<label key="controls pause tooltip">Pause</label><label key="controls pause tooltip">Pause</label>

…


BEML Custom Example 1


BEML Custom Example 1 - Result


BEML Custom Example 1 - Code<Runtime> <Theme name='Deluxe' style='Light'> <Style id='default'> <![CDATA[.titleText {fontSize: 12;}.bodyText {fontSize: 10;}]]> </Style> </Theme> <Layout id='application' width='480' height='230' boxType='vbox'> <TabBar id='playlistTabs' height='15' tabAlign='right' hideSingleTab='true' /> <HBox width='480' height='215'> <VideoPlayer id='videoPlayer' width='300' height="215" video='{videoList.selectedItem}' /> <Spacer width='1' /> <VBox width='179' height='215' vAlign='middle'> <List id='videoList' rowHeight='52' automaticAdvance='true'

data='{playlistTabs.selectedItem.videoDTOs}' selectOnClick='true' itemInsetH='2' itemInsetV='2' itemLeading='1'>

<ListItem boxType='vbox' padding='2'> <TitleLabel height='16' text='{currentItem.displayName}' truncate='true' /> <Label multiline='true' text='{currentItem.shortDescription}' truncate='true' /> </ListItem> </List> </VBox> </HBox> </Layout></Runtime>


BEML Custom Example 1 - ResultboxType=‘vBox’

First vertical element

Second vertical element = hBox

First element of hBoxWithin vBox 2nd Element

= videoPlayer

Second element of hBox

Within vBox 2nd Element

= videoList


BEML Custom Example 2


BEML Custom Example 2 - Result


BEML Custom Example 2 - Code<Runtime><Theme name='Deluxe' style='Light'> <Style id='default'> <![CDATA[.titleText {fontSize: 12;}.bodyText {fontSize: 11;}.linkText {fontSize: 11;}]]> </Style></Theme><Layout id='application' width='588' height='410' boxType='vbox' gutter='11' hAlign='right'> <VBox padding='10'> <VideoPlayer id='videoPlayer' height='316' width='480' video='{videoList.selectedItem}' /> </VBox> <TileList id='videoList' width='100' height='316' automaticAdvance='true' selectOnClick='true' rowHeight='60'

columnWidth='78' numRows='4' useBlur='true' scrollDirection='vertical'> <ListItem boxType='vbox' showBack='false'> <ThumbnailButton data='{currentItem}' source='{currentItem.thumbnailURL}' imageInset='3'/> <Spacer height='1' /> </ListItem> </TileList> <HBox height='80' padding='10'> <Canvas> <Label id='videoTitle' x='-2' y='-6' height='24' width='320' type='title' size='14'

text='{videoPlayer.video.displayName}' truncate='true' /> <Label id='videoDescription' x='-2' y='14' height='35' width='320' size='11'

text='{videoPlayer.video.shortDescription}' truncate='true' multiline='true' /> <Link id='relatedLink' x='-2' y='44' height='18' width='320' size='11' text='{videoPlayer.video.linkText}'

url='{videoPlayer.video.linkURL}' /> </Canvas> <Canvas width='234' height='60'><Image id='logo' scaleMode='scaleDown' hAlign='right' vAlign='bottom' /> </Canvas> </HBox></Layout></Runtime>


BEML for the Standard Compact Tabbed Navigation





<Runtime>

<Theme name='Deluxe' style='Light'> <Style id='default'> <![CDATA[.titleText {size: 12;}.bodyText {size: 10;}.linkText {size: 10;}]]> </Style> </Theme> <Layout id='application' width='798' height='603' boxType='vbox' padding='6' gutter='4'> <HBox height='40' vAlign='bottom' gutter='9'> <Image id='logo' width='300' scaleMode='scaleDown' hAlign='left' vAlign='bottom' /> <TabBar id='playlistTabs' height='22' tabAlign='right' hideSingleTab='true' /> </HBox>

<HBox height='406' gutter='6'> <VideoPlayer id='videoPlayer' width='480' video='{videoList.selectedItem}' /> <List id='videoList' rowHeight='78' automaticAdvance='true' data='{playlistTabs.selectedItem.videoDTOs}' selectOnClick='true' itemInsetV='4' itemLeading='2'> <ListItem boxType='hbox'> <Spacer width='8' /> <VBox width='80' height='74' vAlign='middle'> <ThumbnailButton height='60' data='{currentItem}' source='{currentItem.thumbnailURL}' /> </VBox> <Spacer width='7' /> <VBox> <Spacer height='3' /> <TitleLabel height='18' text='{currentItem.displayName}' truncate='true' /> <Label multiline='true' text='{currentItem.shortDescription}' truncate='true' /> </VBox> …


Single Title Player With Hidden Playlist

<Runtime>

<Theme name="Deluxe" style="Light"/>

<Layout>

<VBox padding="3">

<VideoPlayer id="videoPlayer" video="{videoList.selectedItem}"video="{videoList.selectedItem}" />

</VBox>

<List id='videoList' automaticAdvance='true' data='{playlistTabs.selectedItem.videoDTOs}'data='{playlistTabs.selectedItem.videoDTOs}' visible='false'>

<ListItem></ListItem>

</List>

</Layout>

</Runtime>

Data Binding


BEML: Data Binding

Data Binding in Player Templates

Can use a simple binding to set the values of attributes using the ID and properties of another object

The simple binding syntax looks like this:

<Element attribute="{object.property.property}" /><Element attribute="{object.property.property}" />


Data Binding Elements

Component Binding Object Description

TabBar, List and TileList

selectedItem The currently selected item.

ListItem currentItem The data that corresponds to the ListItem's position in its parent list.

VideoPlayer and VideoDisplay

video The video currently loaded in the player.


Data Binding Examples

A Label displaying the name of the video currently loaded in the player:

<Label

width="160" height="40" text="{videoPlayer.selectedItem.displayName}"text="{videoPlayer.selectedItem.displayName}" type="title"

/>


Data Binding Examples

Display the thumbnail image of the video that corresponds to the ListItem's position in the list: :

<List id="playlist" rowHeight="60" > <ListItem id="videoItem" boxType="hbox"

padding="5" gutter="10">

<Image width="67" height="50" source="{currentItem.thumbnailURL}" />

</ListItem>

</List>

The Player API


The Player API

What is the Player API

The Player API and JavaScript• Studio generated code

• Event Handlers

• Widget integration

The Player API and ActionScript• Studio generated code

• Event handlers

Advanced players


The Player API?

Use the Player API to customize, integrate with or add functionality to your players

Allows you to access and control the player and its components

JavaScript

ActionScript

Must enable the API for your player

The Player API Reference lists all of the methods and events each component supports.

help.brightcove.com

https://help.brightcove.com/developer/docs/playerapi/player-API.cfm


Player API Modules

Brightcove Experience

Advertising Module

Content Module

CuePoints Module

Experience Module

Image

Label

LayoutBox

Link

List

SWFLoader

Synched Banner

TabBar

VideoPlayer Module

Social Module

Menu Module

Search Module


Remember: The Player API is EVENT-DRIVEN

Function Foo()

{

Player = LoadPlayer();

Player.loadVideo(123);

Player.start();

}

Create Experience Object

OnTemplateLoaded

OnTemplateReady

OnContentLoad

OnVideoLoad

The Player API & JavaScript


JavaScript Approach

In Brightcove StudioGet the publishing code

Enable the APIs (*)

Assign content

In JavaScript:(*) Include API Reference

Get references to player components

Load content

Listen for user interaction events


Studio Generated JS Code



<script src="http://admin.brightcove.com/js/APIModules_all.js"> </script><script src="http://admin.brightcove.com/js/APIModules_all.js"> </script>

<object id="myExperience" class="BrightcoveExperience"> <param name="bgcolor" value="#FFFFFF" /> <param name="width" value="966" /> <param name="height" value="546" /> <param name="playerID" value="12000045388" /><param name="playerID" value="12000045388" /> <param name="publisherID" value="18786002"/> <param name="isVid" value="true" /> <param name="isUI" value="true" /> <param name="@playlistTabs" value="276897321, 12000044025" /> <param name="@playlistTabs" value="276897321, 12000044025" />

</object>



Studio Generated JS Code



<script src="http://admin.brightcove.com/js/APIModules_all.js"> </script><script src="http://admin.brightcove.com/js/APIModules_all.js"> </script>

<object id="myExperience" class="BrightcoveExperience"> <param name="bgcolor" value="#FFFFFF" /> <param name="width" value="966" /> <param name="height" value="546" /> <param name="playerID" value="12000045388" /><param name="playerID" value="12000045388" /> <param name="publisherID" value="18786002"/> <param name="isVid" value="true" /> <param name="isUI" value="true" /> <param name="@playlistTabs" value="276897321, 12000044025" /> <param name="@playlistTabs" value="276897321, 12000044025" />

</object>


Enable API(JS Part)

Player Ref ID

AssignContent


Assigning Content

// for a single video in a Single Video template:

<param name="@videoPlayer" value="123456" />

// for a single video, using its reference ID:

<param name="@videoPlayer" value="ref:myVid12345" />

// for one playlist in a multi-playlist template:

<param name="@playlistTabs" value="123456" />

// for multiple playlists:

<param name="@playlistTabs" value="123456, 7891011" />


Getting JS Object References

<script type="text/javascript">

var bcExp; var modVP; var modExp; var modCon;

function onTemplateLoaded(experienceID)

{

bcExp = brightcove.getExperience(experienceID);

modVP = bcExp.getModule(APIModules.VIDEO_PLAYER);

modExp = bcExp.getModule(APIModules.EXPERIENCE);

modCon = bcExp.getModule(APIModules.CONTENT);

}

</script>


JS Event Handlers (1)


{ bcExp = brightcove.getExperience(experienceID); modVP = bcExp.getModule(APIModules.VIDEO_PLAYER);modExp = bcExp.getModule(APIModules.EXPERIENCE);modContent = bcExp.getModule(APIModules.CONTENT);

modExp.addEventListener(BCExperienceEvent.TEMPLATE_REAmodExp.addEventListener(BCExperienceEvent.TEMPLATE_READY, onTemplateReady); DY, onTemplateReady);

modExp.addEventListener(BCExperienceEvent.CONTENT_LOAmodExp.addEventListener(BCExperienceEvent.CONTENT_LOAD, onContentLoad); D, onContentLoad);

modContent.addEventListener(BCContentEvent.VIDEO_LOAD, modContent.addEventListener(BCContentEvent.VIDEO_LOAD, onVideoLoad); onVideoLoad);

}



function onTemplateReady(evt)onTemplateReady(evt)

{

alert("EVENT: TEMPLATE_READY");

}

function onContentLoad(evt) onContentLoad(evt)

{

alert("EVENT: CONTENT_LOAD");

var currentVideo = modVP.getCurrentVideo();

alert("INFO: Currently Loaded videoID: " + currentVideo.id); modContent.getVideoAsynch(1488633950);

}



function onVideoLoad(evt)onVideoLoad(evt)

{

alert("EVENT: VIDEO_LOAD");

// Play video that was just loaded modVP.loadVideo(evt.video.id);

}


Listening for User Interaction Events

var bcExp; var modMenu;


{

bcExp = brightcove.getExperience(experienceID);

modMenu = bcExp.getModule(APIModules.MENU);

modMenu.addEventListener(BCMenuEvent.SEND_EMAIL_CLICK, onEmailSentonEmailSent);

}

function onEmailSent(evt)onEmailSent(evt)

{

alert("An Email was sent!");

}

Exercise 2: Using the Player API - JavaScript


Exercise 2: Using the Player API - JavaScript

Player API Section in your Sandbox Top Menu- Player API - CMS Integration Widget Example- Player API: Dynamically Selecting A Video- Player API: Vanilla Player with JavaScript Playlist

Player API SetLink function can be used to dynamically control the URL used for viral sharing. One can use this call to set the link provide in get link and emails to the page that embeds the player.

Navigate To Home Page -> Exercises


CMS Integration Widget Example

Shows how to write a CMS Plugin (WordPress)

Approach for other CMS will be very similar


CMS Integration Widget Example

if ( !array_key_exists('video', $arguments) )

{

return ' <div style="background-color:#f99; padding:10px;">

Brightcove Player Widget Error: Required parameter "video" is missing!</div> ';

exit;

}

else

{ $video = $arguments['video']; } if( array_key_exists('width', $arguments) ) { $height = $arguments['width']; } if( array_key_exists('height', $arguments) ) { $height = $arguments['height']; } if( array_key_exists('player', $arguments) ) { $player = $arguments['player']; } $output .= “

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="$width" height="$height" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab...">

<param name="name" value="flashObj" /><param name="bgcolor" value="#FFFFFF" /><param name="flashvars" <param name="flashvars"

value="@videoPlayer=$video&playerID=$player&domain=embed&" />value="@videoPlayer=$video&playerID=$player&domain=embed&" />…

return $output;

}


Dynamically Selecting A Video

<?php

if( isset($_REQUEST['video']))

{

$video = $_REQUEST['video'];

$html = getPlayerHTML($video);

} else

{

$html = getInputHTML();

}

echo $html;

…


Dynamically Selecting A Videofunction getPlayerHTML($video)

{

$html = "<html><head><title>Dynamic Video Example….

</title></head> <body>


<script language='JavaScript' type='text/javascript' src='http://admin.brightcove.com/js/APIModules_all.js'> </script>

<script language='JavaScript' type='text/javascript' src='http://admin.brightcove.com/js/BrightcoveExperiences.js'></script>

<object id='myExperience' class='BrightcoveExperience'>

<param name='bgcolor' value='#FFFFFF' />

<param name='width' value='486' />

<param name='height' value='412' />

<param name='playerID' value='1911416499' />

<param name='publisherID' value='1705665024'/>

<param name='@videoPlayer' value='$video' /> <param name='@videoPlayer' value='$video' />

<param name='isVid' value='true' />

</object>

</body> </html>";

return $html; }


Vanilla Player With JavaScript Playlist

Uses JavaScript in stead of built-in TileList

Applies ready-to-use Open Source JS Components


Vanilla Player With JavaScript Playlist

<body>

<div id="playerContainer">

<object id="myExperience" class="BrightcoveExperience">

<param name="bgcolor" value="#FFFFFF" />

…

</div>

 

<div id="tileListContainer"> <div id="tileListContainer">

<div id="tileList"></div> <div id="tileList"></div>

</div> </div>

 

<div id="scrubberContainer"> <div id="scrubberContainer">

<div id="scrubber"></div> <div id="scrubber"></div>

</div> </div>

</body>

The Player API & ActionScript


ActionScript Approach

In Brightcove Studio:Get the publishing code

Enable the APIsEnable the APIs

Assign content

In ActionScript:Include BrightcovePlayer.as

Get references to player components

Load content

Listen for user interaction events

FullScreen switching


ActionScript Approach

Since not everyone will have Flash Installed, here are some screen shots of the main steps in Flash CS3 to embed a Brightcove Player

Detailed example article is included in the Sandbox


ActionScript Approach: 1 – Create AS3 Project


ActionScript Approach: 2 – Create AS3 File In Project

This file MUST be called

BrightcovePlayer.as


ActionScript Approach: 3 – Get The Publish AS3 Code


ActionScript Approach: 3 – Get The Publish AS3 Code


ActionScript Approach: 4 – Paste into AS3 File


ActionScript Approach: 5 – Instantiate Player in TimeLine


ActionScript Approach: 6 – Set Dimensions


Using The Studio Generated ActionScript Code

import flash.display.*;

import flash.events.Event;

import BrightcovePlayer;import BrightcovePlayer;

public class Main extends Sprite

{

var mPlayer:Object; var mContent:Object; var mExp:Object;

var bcp:BrightcovePlayer = new BrightcovePlayer();var bcp:BrightcovePlayer = new BrightcovePlayer();

…

public function Main()

{

bcp.addEventListener ("templateLoaded", templateLoaded);

addChild (bcp);

}

…


Getting References & Adding Event Handlers

var mPlayer:Object; var mContent:Object; var mExp:Object;

public function templateLoaded (evt:Event):void

{

trace("template loaded");

mPlayer = bcp.getModule("videoPlayer");

mContent = bcp.getModule("content");

mExp = bcp.getModule("experience");

mExp.addEventListener ("contentLoad", contentLoad);

mContent.addEventListener ("videoLoad", videoLoad);

}


Loading Contentpublic function templateLoaded (evt:Event):void

{

mPlayer = bcp.getModule("videoPlayer");

mContent = bcp.getModule("content");

mExp = bcp.getModule("experience");

mExp.addEventListener ("contentLoad", contentLoadcontentLoad););

mContent.addEventListener ("videoLoad", videoLoadvideoLoad);

}

public function contentLoadcontentLoad (evt:Event):void

{

var video:Object;

mContent.getVideoAsynch (0123456789);

}

public function videoLoadvideoLoad(evt:Object):void

{

mPlayer.loadVideo(evt.video.id); }


Listening For User Interaction

public function templateLoaded(evt:Event):void

{

mMenu = bcp.getModule("menu");

mMenu.addEventListener("sendEmailClick", emailSentemailSent);

}

public function emailSent(evt:Event):emailSent(evt:Event):void

{

trace("An email was sent!");

}


Going Full Screen

If you're embedding the player in a Flash application, you need to configure your shell to properly display full screen mode.

In addition to setting the allowFullScreen parameter to true in your object and embed tags, you also need to include the following in your shell SWF:

stage.scaleMode = StageScaleMode.NO_SCALE; stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;stage.align = StageAlign.TOP_LEFT;

public function templateLoaded(evt:Event):void

{

mPlayer = bcp.getModule("videoPlayer"); mPlayer.goFullScreen(true);

}

Exercise 3: Using the Player API - ActionScript


Exercise 3: Using the Player API - ActionScript

1. Hello World with OnTemplateLoad • Use OnTemplateLoad to throw a "Hello World" alert box (JS) or trace

statement (Flash)

2. Hello World with mediaStart event • Create a "Hello World" alert or trace using the mediaStart event

3. Load a new video into the player • Build on previous exercises: using event handling + calls to load a

video from the server

4. Add the name of the video that we just loaded to the alert • Build on previous exercises: using event handling + calls to load a

video from the server and get the metadata from the video object


Player API ActionScript Examples

Advanced Section in your Sandbox Top Menu


Advanced Player API: Subtitling


Advanced Player API: 3D TV

Section III: The Media API


Section III: The Media API

In this section:What the Media API is

The Media API Read methods• Exercises

The Write API Write methods• Exercises


What is the Media API?

A REST-based API for accessing the content and metadata in your Brightcove account. Divided into a READ and WRITE API portion.

REST (Representational State Transfer):a standard way of accessing data stored remotely over HTTP

a cousin of SOAP = technology that powers “web services.”

abstracts the workings of the remote system

all your code needs to understand is the format of the returned data

Example Call:http://api.brightcove.com/services/library?command=find_all_videos&token=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8E.

http://api.brightcove.com/services/library?command=find_all_videos&token=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8E

http://api.brightcove.com/services/library?command=find_all_videos&token=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8E


Media API & Security

Access to the API is protected with tokens that you pass as a parameter when making API calls

Tokens are generated for you by Brightcove and protected by you

There are separate tokens for READ and WRITE access

This allows you to develop applications with role-based access


Media API & Security

For this training, we will use a dedicated set of tokens

For using the API with your own Brightcove Account, please request your pair of tokens: https://help.brightcove.com/request-support.cfm


Media API Data Format

Data is formatted as JSON strings

(JavaScript Object Notation)

JSONA lightweight way of transferring complex objects as strings

Nearly every language today can claim a large number of publicly available libraries to parse JSON strings into native objects.


Example JSON String

{"items":[{"creationDate":"1171267200000","economics":"FREE","id":49518762,"lastModifiedDate":"1171324536445","length":111077,"linkText“null,"linkURL":null,"longDescription":null,"name":"DocumentarianSkydiving","playsTotal":189,"playsTrailingWeek":3,"publishedDate":"117324433253","referenceId":"title006","releaseDate":null,“…..

The Media API – Read Methods


Read API – Typical Applications

Contextual PublishingDisplaying Video Metadata in the embedding web page

Search Engine OptimizationUsing Metadata to optimize Search Engine pickup

CMS IntegrationIntegrating Metadata into your Corporate CMS

SyndicationIntegrating your content into other portals & sites

See AlsoPresenting relevant content the user could be interested in


Read API Data Format

The Read API consists of a set of methods which perform a variety of queries on our servers (which are cached for performance), and return sets of data in DTOs or Data Transfer Objects

Calling the READ APIHTTP GET Request in REST Format

Must provide READ Token

Read API ParametersAll Read API Functions are defined in the online reference:

https://help.brightcove.com/developer/docs/mediaapi/media-API.cfm

https://help.brightcove.com/developer/docs/mediaapi/media-API.cfm


The Main READ API’s

Video READfind_all_videos

find_video_by_id

find_related_videos

find_videos_by_ids

find_video_by_reference_id

find_videos_by_reference_ids

find_videos_by_user_id

find_videos_by_campaign_id

find_videos_by_text

find_videos_by_tags

Playlist READfind_all_playlists

find_playlist_by_id

find_playlists_by_ids

find_playlist_by_reference_id

find_playlists_by_reference_ids

find_playlists_for_player_id


Video READ API – Detailed Excerpt

Function Parameters Description

find_all_videos token:String page_size:Integer page_number:Integer sort_by:SortByType sort_order:SortOrderType fields:Set get_item_count:Boolean

Find all videos in the Brightcove media library for this account.

Returns a JSON ItemCollection

find_video_by_id token:String video_id:long fields:Set

Finds a single video with the specified id. Returns a single JSON Video Object

find_related_videos token:String video_id:long page_size:Integer page_number:Integer get_item_count:Boolean fields:Set

Finds videos related to the given video. Combines the name and short description of the given video and searches for any partial matches in the name, description, and tags of all videos in the Brightcove media library for this account. More precise ways of finding related videos include tagging your videos by subject and using the find_videos_by_tags method to find videos that share the same tags: or creating a playlist that includes videos that you know are related.

Returns a JSON ItemCollection

find_videos_by_ids token:String video_ids:List fields:Set

Find multiple videos, given their ids. Returns a JSON ItemCollection


Displaying Metadata

Make the API CallFor example, find_all_videos

Parse the returned JSON StringCheck for errors

Loop though the returned collection

Insert Into the Web PageApply Styling & Formatting

Exercise 4: Using the Read API - Part 1


Exercise 4: Using the Read API - Part 1

We’ll be using a local desktop web serverMain Page: http://localhost

Check details for Exercise One

Objective:No player on the page

Write an HTML page & call the FindAllVideos method

Return 5 videos and display the titles and thumbnails

http://localhost/

Exercise 4: The Read API - Part 2



Add Simple Search FunctionalityAdd a simple form to ask for a search termSearch the Name & Description field of VideosWhich Method Will We Use Now?

Check the Media API Reference

Objective:No player on the pageWrite an HTML page with a Search formCall the FindVideosByText methodReturn 5 videos and display the titles and thumbnails

Check details for Exercise Two on your local web server


Read API : Enhancing SEO

Search engine optimization (SEO) is the process of improving the volume and quality of traffic to a web site from search engines via "natural" ("organic" or "algorithmic") search results for targeted keywords

Common ApproachesAdd Descriptions as HTML Text

Add Tags as HTML Links

Provide a unique URL for each item

CMS Integration

Provide RSS Feeds

ContextPublishing




How would you accomplish each of these tasks?Add Descriptions as HTML Text



CMS Integration

Provide RSS Feeds

The Media API – Write Methods


Write API – Typical Applications

Batch uploadingUploading your existing media library into BrightcoveUploading User Generated Content into Brightcove

Integrating Social Networking ToolsRating, Digg, MySpace, FaceBook, etc.

Data ConsolidationPopulating ReferenceID’s with your Database’s UIDPopulating Descriptions, tags, etc

Campaign ManagementSwitching Status of series of Videos

ModerationGiving moderators the options they need without access to the Brightcove Console

Exercise 5: Writing an Ingestion Tool


Exercise 5: Writing an Ingestion Tool

How would you accomplish each of these tasks?Users can contribute videos on various themes in a variety of formats (.mov, .avi, .wmv, .flv)

Videos must be encoded in four different resolutions

Videos must be reviewed and approved by moderators who do not have access to the Brightcove Console

Users must be informed of their video being approved or rejected

Video metadata must be populated by data entered by the user


Advanced Media API : SEO


Advanced Media API: CMS Integration


Advanced Media API: Custom Upload + User Accounts


REFERENCE


Answer - Read API: Exercise 4


Use a Find* Read API Method

Insert the shortDescription & longDescription fields as HTML-Encoded Text



CMS Integration

Provide RSS Feeds





Use a Find* Read API Method

Iterate the tags field (separate by commas)

Insert the tag values as links

Provide search logic for each tag


CMS Integration

Provide RSS Feeds






Use the Brightcove ID field or the ReferenceID field (your custom unique ID for each video)

Requires configuration of your Web Server

http://httpd.apache.org/docs/2.0/misc/rewriteguide.html

CMS Integration

Provide RSS Feeds






CMS Integration

Depends on the plugin architecture of your CMS

Correlates the Brightcove Metadata with your CMS Metadata (using ID or ReferenceID fields)

http://codex.wordpress.org/Writing_a_Plugin

Provide RSS Feeds






CMS Integration

Provide RSS Feeds

Publishes descriptions and tags with unique links in RSS Format



RSS Example Code

<?xml version="1.0"?> <rss version="2.0">

<channel>

<title>Lift Off News</title>

<link>http://liftoff.msfc.nasa.gov/</link>

<description>Liftoff to Space Exploration.</description>

<language>en-us</language>

<pubDate>Tue, 10 Jun 2003 04:00:00 GMT</pubDate>

<lastBuildDate>Tue, 10 Jun 2003 09:41:01 GMT</lastBuildDate>

<docs>http://blogs.law.harvard.edu/tech/rss</docs>

<generator>Weblog Editor 2.0</generator>

<managingEditor>[email protected]</managingEditor>

<webMaster>[email protected]</webMaster>

….


Answer Exercise 5: Writing an Ingestion Tool

Writing an Ingestion Tool:

Users can contribute videos on various themes in a variety of formats (.mov, .avi, .wmv, .flv)

Build an upload tool, using a mid-tier is recommended

Use the create_video Write API Method

Transcoding will be done automatically by the Brightcove Platform




Videos must be encoded in four different resolutionsThis can be done automatically by the Brightcove Platform upon upload of your video

create_video(token:String, video:Video, filename:String, maxsize:Long, file:InputStream, file_checksum:String, create_multiple_renditions:Boolean):Long




Videos must be reviewed and approved by moderators who do not have access to the Brightcove Console

If using a mid-tier: build a custom management tool that can view, edit, approve & upload individual videos.

If uploading directly to Brightcove: upload videos as inactive, then use READ & WRITE APIs to build a management tool




Users must be informed of their video being approved or rejected

Batch through the status of uploaded videos and send an email notification based on a video meta tag




Video metadata must be populated by data entered by the user

Use the Write API to update video metadata after uploading it to the Brightcove Platform

update_video(token:String, video:Video):Video

Refer to the Video Object Documentationhttps://help.brightcove.com/developer/docs/mediaapi/objects.cfm

Documents

Brightcove Developer Training Bob de Wit © 2008 Brightcove, Inc. All rights reserved. 3 Developer Training Provides a comprehensive overview of the extensive