View
223
Download
3
Category
Tags:
Preview:
Citation preview
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
© 2008 Brightcove, Inc. All rights reserved. 4
Introductions
© 2008 Brightcove, Inc. All rights reserved. 5
Schedule
Start on time, end on time9:00 – 5:00ish
15 minute break in the morning and afternoon
1 hour for lunch
© 2008 Brightcove, Inc. All rights reserved. 6
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, …
© 2008 Brightcove, Inc. All rights reserved. 7
Set Up
Brightcove Accounthttp://studio3.brightcove.com
Login: BCD1@training.com.....BCD1@training.com
Password: Training
Sandboxhtpp://localhost
Section I: Brightcove Developer Basics
© 2008 Brightcove, Inc. All rights reserved. 9
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
© 2008 Brightcove, Inc. All rights reserved. 11
The Brightcove Service Platform
Your Web Server Brightcove
Admin ClientUser
CDN
© 2008 Brightcove, Inc. All rights reserved. 12
The Brightcove Service Platform : Media Upload
Your Web Server Brightcove
Admin ClientUser
CDN
storage
1
2
© 2008 Brightcove, Inc. All rights reserved. 13
The Brightcove Service Platform : Media Upload
Your Web Server Brightcove
Admin ClientUser
CDN
storage
1
2
transcoding3
© 2008 Brightcove, Inc. All rights reserved. 14
The Brightcove Service Platform : Media Upload
Your Web Server Brightcove
Admin ClientUser
CDN
storage
1
2
transcoding3CDN XFer
4
© 2008 Brightcove, Inc. All rights reserved. 15
The Brightcove Service Platform: Player Creation
Your Web Server Brightcove
Admin ClientUser
CDN
PlayListPlayer+ Settings
1
© 2008 Brightcove, Inc. All rights reserved. 16
The Brightcove Service Platform: Player Publishing
Your Web Server
Player Embed Code
Admin ClientUser
1
2 Web PageHTML, JS, PHP, ASP, JSP, …
Brightcove CDN
© 2008 Brightcove, Inc. All rights reserved. 17
The Brightcove Service Platform: Viewing
Your Web Server
Page Load
Admin ClientUser
1
Brightcove CDN
© 2008 Brightcove, Inc. All rights reserved. 18
The Brightcove Service Platform: Viewing
Your Web Server
Page with embedded BC player
Admin ClientUser
2
Brightcove.com
© 2008 Brightcove, Inc. All rights reserved. 19
The Brightcove Service Platform: Viewing
Your Web Server
Player ID Request to brightcove
Admin ClientUser
3
Brightcove CDN
© 2008 Brightcove, Inc. All rights reserved. 20
The Brightcove Service Platform: Viewing
Your Web Server
Player + Metadata sent to user
Admin ClientUser
4
Brightcove CDN
© 2008 Brightcove, Inc. All rights reserved. 21
The Brightcove Service Platform: Viewing
Your Web Server
CDN Request for video
Admin ClientUser
5
Brightcove CDN
© 2008 Brightcove, Inc. All rights reserved. 22
The Brightcove Service Platform: Viewing
Your Web Server
Video streamed/loaded from CDN
Admin ClientUser
6
Brightcove CDN
Creating a Brightcove Experience in the Studio
© 2008 Brightcove, Inc. All rights reserved. 24
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
© 2008 Brightcove, Inc. All rights reserved. 25
Upload Content: Using the Studio Interface
© 2008 Brightcove, Inc. All rights reserved. 26
Content Settings & Metadata: Basic Presentation
© 2008 Brightcove, Inc. All rights reserved. 27
Content Settings & Metadata: Economics & Distribution
© 2008 Brightcove, Inc. All rights reserved. 28
Content Settings & Metadata: Scheduling and Geo Filtering
© 2008 Brightcove, Inc. All rights reserved. 29
Content Settings & Metadata: Logo Overlay
© 2008 Brightcove, Inc. All rights reserved. 30
Playlist Creation & Settings
© 2008 Brightcove, Inc. All rights reserved. 31
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!!!
© 2008 Brightcove, Inc. All rights reserved. 32
Player Settings
© 2008 Brightcove, Inc. All rights reserved. 33
Player Settings
© 2008 Brightcove, Inc. All rights reserved. 34
Player Settings
© 2008 Brightcove, Inc. All rights reserved. 35
Player Settings
© 2008 Brightcove, Inc. All rights reserved. 36
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
© 2008 Brightcove, Inc. All rights reserved. 37
Standard Player Templates
© 2008 Brightcove, Inc. All rights reserved. 38
Standard Player Templates
© 2008 Brightcove, Inc. All rights reserved. 39
Standard Player Templates
© 2008 Brightcove, Inc. All rights reserved. 40
Player Styling in the BC3 Studio Style Editor
© 2008 Brightcove, Inc. All rights reserved. 41
Player Publishing
Exercise 1: The Brightcove Studio
© 2008 Brightcove, Inc. All rights reserved. 43
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
© 2008 Brightcove, Inc. All rights reserved. 45
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
© 2008 Brightcove, Inc. All rights reserved. 46
Getting the ID
© 2008 Brightcove, Inc. All rights reserved. 47
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>
© 2008 Brightcove, Inc. All rights reserved. 48
The ID in Player JavaScript Publishing Code
<!-- Start of Brightcove Player -->
<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>
<!-- End of Brightcove Player -->
© 2008 Brightcove, Inc. All rights reserved. 49
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;
© 2008 Brightcove, Inc. All rights reserved. 50
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
© 2008 Brightcove, Inc. All rights reserved. 52
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
© 2008 Brightcove, Inc. All rights reserved. 53
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.
© 2008 Brightcove, Inc. All rights reserved. 54
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
© 2008 Brightcove, Inc. All rights reserved. 55
Creating A Player Template
© 2008 Brightcove, Inc. All rights reserved. 56
BEML Code Validation
© 2008 Brightcove, Inc. All rights reserved. 57
BEML Code Validation
Who can spot the error?
The Elements of BEML
© 2008 Brightcove, Inc. All rights reserved. 59
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
© 2008 Brightcove, Inc. All rights reserved. 60
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)
© 2008 Brightcove, Inc. All rights reserved. 61
BEML: UI Elements
© 2008 Brightcove, Inc. All rights reserved. 62
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
© 2008 Brightcove, Inc. All rights reserved. 63
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.
© 2008 Brightcove, Inc. All rights reserved. 64
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
© 2008 Brightcove, Inc. All rights reserved. 65
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
© 2008 Brightcove, Inc. All rights reserved. 66
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
© 2008 Brightcove, Inc. All rights reserved. 68
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
© 2008 Brightcove, Inc. All rights reserved. 69
Creating A Simple BEML Template - Result
Localizing a player with BEML
© 2008 Brightcove, Inc. All rights reserved. 71
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>
© 2008 Brightcove, Inc. All rights reserved. 72
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>
© 2008 Brightcove, Inc. All rights reserved. 73
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">
<!-- Video player chrome controls -->
<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>
…
© 2008 Brightcove, Inc. All rights reserved. 74
BEML Custom Example 1
© 2008 Brightcove, Inc. All rights reserved. 75
BEML Custom Example 1 - Result
© 2008 Brightcove, Inc. All rights reserved. 76
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>
© 2008 Brightcove, Inc. All rights reserved. 77
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
© 2008 Brightcove, Inc. All rights reserved. 78
BEML Custom Example 2
© 2008 Brightcove, Inc. All rights reserved. 79
BEML Custom Example 2 - Result
© 2008 Brightcove, Inc. All rights reserved. 80
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>
© 2008 Brightcove, Inc. All rights reserved. 81
BEML for the Standard Compact Tabbed Navigation
© 2008 Brightcove, Inc. All rights reserved. 82
BEML for the Standard Compact Tabbed Navigation
© 2008 Brightcove, Inc. All rights reserved. 83
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> …
© 2008 Brightcove, Inc. All rights reserved. 84
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
© 2008 Brightcove, Inc. All rights reserved. 86
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}" />
© 2008 Brightcove, Inc. All rights reserved. 87
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.
© 2008 Brightcove, Inc. All rights reserved. 88
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"
/>
© 2008 Brightcove, Inc. All rights reserved. 89
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
© 2008 Brightcove, Inc. All rights reserved. 91
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
© 2008 Brightcove, Inc. All rights reserved. 92
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
© 2008 Brightcove, Inc. All rights reserved. 93
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
© 2008 Brightcove, Inc. All rights reserved. 94
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
© 2008 Brightcove, Inc. All rights reserved. 96
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
© 2008 Brightcove, Inc. All rights reserved. 97
Studio Generated JS Code
<!-- Start of Brightcove Player -->
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<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>
<!-- End of Brightcove Player -->
© 2008 Brightcove, Inc. All rights reserved. 98
Studio Generated JS Code
<!-- Start of Brightcove Player -->
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<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>
<!-- End of Brightcove Player -->
Enable API(JS Part)
Player Ref ID
AssignContent
© 2008 Brightcove, Inc. All rights reserved. 99
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" />
© 2008 Brightcove, Inc. All rights reserved. 100
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>
© 2008 Brightcove, Inc. All rights reserved. 101
JS Event Handlers (1)
function onTemplateLoaded(experienceID)
{ 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);
}
© 2008 Brightcove, Inc. All rights reserved. 102
JS Event Handlers (2)
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);
}
© 2008 Brightcove, Inc. All rights reserved. 103
JS Event Handlers (3)
function onVideoLoad(evt)onVideoLoad(evt)
{
alert("EVENT: VIDEO_LOAD");
// Play video that was just loaded modVP.loadVideo(evt.video.id);
}
© 2008 Brightcove, Inc. All rights reserved. 104
Listening for User Interaction Events
var bcExp; var modMenu;
function onTemplateLoaded(experienceID)
{
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
© 2008 Brightcove, Inc. All rights reserved. 106
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
© 2008 Brightcove, Inc. All rights reserved. 107
CMS Integration Widget Example
Shows how to write a CMS Plugin (WordPress)
Approach for other CMS will be very similar
© 2008 Brightcove, Inc. All rights reserved. 108
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;
}
© 2008 Brightcove, Inc. All rights reserved. 109
Dynamically Selecting A Video
<?php
if( isset($_REQUEST['video']))
{
$video = $_REQUEST['video'];
$html = getPlayerHTML($video);
} else
{
$html = getInputHTML();
}
echo $html;
…
© 2008 Brightcove, Inc. All rights reserved. 110
Dynamically Selecting A Videofunction getPlayerHTML($video)
{
$html = "<html><head><title>Dynamic Video Example….
</title></head> <body>
<!-- Start of Brightcove Player -->
<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; }
© 2008 Brightcove, Inc. All rights reserved. 111
Vanilla Player With JavaScript Playlist
Uses JavaScript in stead of built-in TileList
Applies ready-to-use Open Source JS Components
© 2008 Brightcove, Inc. All rights reserved. 112
Vanilla Player With JavaScript Playlist
<body>
<div id="playerContainer">
<object id="myExperience" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
…
</div>
<!-- Will hold the scrolling list. --> <!-- Will hold the scrolling list. -->
<div id="tileListContainer"> <div id="tileListContainer">
<div id="tileList"></div> <div id="tileList"></div>
</div> </div>
<!-- Will hold the scrollbar. --> <!-- Will hold the scrollbar. -->
<div id="scrubberContainer"> <div id="scrubberContainer">
<div id="scrubber"></div> <div id="scrubber"></div>
</div> </div>
</body>
The Player API & ActionScript
© 2008 Brightcove, Inc. All rights reserved. 114
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
© 2008 Brightcove, Inc. All rights reserved. 115
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
© 2008 Brightcove, Inc. All rights reserved. 116
ActionScript Approach: 1 – Create AS3 Project
© 2008 Brightcove, Inc. All rights reserved. 117
ActionScript Approach: 2 – Create AS3 File In Project
This file MUST be called
BrightcovePlayer.as
© 2008 Brightcove, Inc. All rights reserved. 118
ActionScript Approach: 3 – Get The Publish AS3 Code
© 2008 Brightcove, Inc. All rights reserved. 119
ActionScript Approach: 3 – Get The Publish AS3 Code
© 2008 Brightcove, Inc. All rights reserved. 120
ActionScript Approach: 4 – Paste into AS3 File
© 2008 Brightcove, Inc. All rights reserved. 121
ActionScript Approach: 5 – Instantiate Player in TimeLine
© 2008 Brightcove, Inc. All rights reserved. 122
ActionScript Approach: 6 – Set Dimensions
© 2008 Brightcove, Inc. All rights reserved. 123
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);
}
…
© 2008 Brightcove, Inc. All rights reserved. 124
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);
}
© 2008 Brightcove, Inc. All rights reserved. 125
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); }
© 2008 Brightcove, Inc. All rights reserved. 126
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!");
}
© 2008 Brightcove, Inc. All rights reserved. 127
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
© 2008 Brightcove, Inc. All rights reserved. 129
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
© 2008 Brightcove, Inc. All rights reserved. 130
Player API ActionScript Examples
Advanced Section in your Sandbox Top Menu
© 2008 Brightcove, Inc. All rights reserved. 131
Advanced Player API: Subtitling
© 2008 Brightcove, Inc. All rights reserved. 132
Advanced Player API: 3D TV
Section III: The Media API
© 2008 Brightcove, Inc. All rights reserved. 134
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
© 2008 Brightcove, Inc. All rights reserved. 135
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.
© 2008 Brightcove, Inc. All rights reserved. 136
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
© 2008 Brightcove, Inc. All rights reserved. 137
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
© 2008 Brightcove, Inc. All rights reserved. 138
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.
© 2008 Brightcove, Inc. All rights reserved. 139
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
© 2008 Brightcove, Inc. All rights reserved. 141
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
© 2008 Brightcove, Inc. All rights reserved. 142
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
© 2008 Brightcove, Inc. All rights reserved. 143
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
© 2008 Brightcove, Inc. All rights reserved. 144
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
© 2008 Brightcove, Inc. All rights reserved. 145
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
© 2008 Brightcove, Inc. All rights reserved. 147
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
Exercise 4: The Read API - Part 2
© 2008 Brightcove, Inc. All rights reserved. 149
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
© 2008 Brightcove, Inc. All rights reserved. 150
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
Exercise 4: The Read API - Part 3
© 2008 Brightcove, Inc. All rights reserved. 152
Exercise 4: The Read API - Part 3
How would you accomplish each of these tasks?Add Descriptions as HTML Text
Add Tags as HTML Links
Provide a unique URL for each item
CMS Integration
Provide RSS Feeds
The Media API – Write Methods
© 2008 Brightcove, Inc. All rights reserved. 154
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
© 2008 Brightcove, Inc. All rights reserved. 156
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
© 2008 Brightcove, Inc. All rights reserved. 157
Advanced Media API : SEO
© 2008 Brightcove, Inc. All rights reserved. 158
Advanced Media API: CMS Integration
© 2008 Brightcove, Inc. All rights reserved. 159
Advanced Media API: Custom Upload + User Accounts
© 2008 Brightcove, Inc. All rights reserved. 160
REFERENCE
© 2008 Brightcove, Inc. All rights reserved. 161
Answer - Read API: Exercise 4
How would you accomplish each of these tasks?Add Descriptions as HTML Text
Use a Find* Read API Method
Insert the shortDescription & longDescription fields as HTML-Encoded Text
Add Tags as HTML Links
Provide a unique URL for each item
CMS Integration
Provide RSS Feeds
© 2008 Brightcove, Inc. All rights reserved. 162
Answer - Read API: Exercise 4
How would you accomplish each of these tasks?Add Descriptions as HTML Text
Add Tags as HTML Links
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
Provide a unique URL for each item
CMS Integration
Provide RSS Feeds
© 2008 Brightcove, Inc. All rights reserved. 163
Answer - Read API: Exercise 4
How would you accomplish each of these tasks?Add Descriptions as HTML Text
Add Tags as HTML Links
Provide a unique URL for each item
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
© 2008 Brightcove, Inc. All rights reserved. 164
Answer - Read API: Exercise 4
How would you accomplish each of these tasks?Add Descriptions as HTML Text
Add Tags as HTML Links
Provide a unique URL for each item
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
© 2008 Brightcove, Inc. All rights reserved. 165
Answer - Read API: Exercise 4
How would you accomplish each of these tasks?Add Descriptions as HTML Text
Add Tags as HTML Links
Provide a unique URL for each item
CMS Integration
Provide RSS Feeds
Publishes descriptions and tags with unique links in RSS Format
© 2008 Brightcove, Inc. All rights reserved. 166
Answer - Read API: Exercise 4
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>editor@example.com</managingEditor>
<webMaster>webmaster@example.com</webMaster>
….
© 2008 Brightcove, Inc. All rights reserved. 167
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
© 2008 Brightcove, Inc. All rights reserved. 168
Answer Exercise 5: Writing an Ingestion Tool
Writing an Ingestion Tool:
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
© 2008 Brightcove, Inc. All rights reserved. 169
Answer Exercise 5: Writing an Ingestion Tool
Writing an Ingestion Tool:
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
© 2008 Brightcove, Inc. All rights reserved. 170
Answer Exercise 5: Writing an Ingestion Tool
Writing an Ingestion 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
© 2008 Brightcove, Inc. All rights reserved. 171
Answer Exercise 5: Writing an Ingestion Tool
Writing an Ingestion Tool:
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
Recommended