Download presentation
Presentation is loading. Please wait.
Published byCecilia Ward Modified over 9 years ago
2
Brightcove Developer Training Bob de Wit
3
© 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
4
© 2008 Brightcove, Inc. All rights reserved. 4 Introductions
5
© 2008 Brightcove, Inc. All rights reserved. 5 Schedule Start on time, end on time 9:00 – 5:00ish 15 minute break in the morning and afternoon 1 hour for lunch
6
© 2008 Brightcove, Inc. All rights reserved. 6 Agenda Section I: Brightcove Developer Basics - Morning Brightcove Service Platform Components The Studio: Videos, Playlists & Players Customizing Players - Morning BEML The Player API LUNCH The Media API - Afternoon The Read Methods Metadata, CMS Integration, SEO, … The Write Methods Custom Upload Apps, UGC, …
7
© 2008 Brightcove, Inc. All rights reserved. 7 Set Up Brightcove Account http://studio3.brightcove.com Login: BCD1@training.com.....BCD1@training.comBCD1@training.com Password: Training Sandbox htpp://localhost
8
Section I: Brightcove Developer Basics
9
© 2008 Brightcove, Inc. All rights reserved. 9 Section I: Brightcove Developer Basics In this section: The workflow of the service platform Creating 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
10
The workflow of the Brightcove Service Platform
11
© 2008 Brightcove, Inc. All rights reserved. 11 The Brightcove Service Platform Your Web ServerBrightcove Admin Client User CDN
12
© 2008 Brightcove, Inc. All rights reserved. 12 The Brightcove Service Platform : Media Upload Your Web ServerBrightcove Admin Client User CDN storage 1 2
13
© 2008 Brightcove, Inc. All rights reserved. 13 The Brightcove Service Platform : Media Upload Your Web ServerBrightcove Admin Client User CDN storage 1 2 transcoding 3
14
© 2008 Brightcove, Inc. All rights reserved. 14 The Brightcove Service Platform : Media Upload Your Web ServerBrightcove Admin Client User CDN storage 1 2 transcoding 3 CDN XFer 4
15
© 2008 Brightcove, Inc. All rights reserved. 15 The Brightcove Service Platform: Player Creation Your Web ServerBrightcove Admin Client User CDN PlayList Player + Settings 1
16
© 2008 Brightcove, Inc. All rights reserved. 16 The Brightcove Service Platform: Player Publishing Your Web Server Player Embed Code Admin Client User 1 2 Web Page HTML, JS, PHP, ASP, JSP, … BrightcoveCDN
17
© 2008 Brightcove, Inc. All rights reserved. 17 The Brightcove Service Platform: Viewing Your Web Server Page Load Admin Client User 1 BrightcoveCDN
18
© 2008 Brightcove, Inc. All rights reserved. 18 The Brightcove Service Platform: Viewing Your Web Server Page with embedded BC player Admin Client User 2 Brightcove.com
19
© 2008 Brightcove, Inc. All rights reserved. 19 The Brightcove Service Platform: Viewing Your Web Server Player ID Request to brightcove Admin Client User 3 BrightcoveCDN
20
© 2008 Brightcove, Inc. All rights reserved. 20 The Brightcove Service Platform: Viewing Your Web Server Player + Metadata sent to user Admin Client User 4 BrightcoveCDN
21
© 2008 Brightcove, Inc. All rights reserved. 21 The Brightcove Service Platform: Viewing Your Web Server CDN Request for video Admin Client User 5 BrightcoveCDN
22
© 2008 Brightcove, Inc. All rights reserved. 22 The Brightcove Service Platform: Viewing Your Web Server Video streamed/loaded from CDN Admin Client User 6 BrightcoveCDN
23
Creating a Brightcove Experience in the Studio
24
© 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
25
© 2008 Brightcove, Inc. All rights reserved. 25 Upload Content: Using the Studio Interface
26
© 2008 Brightcove, Inc. All rights reserved. 26 Content Settings & Metadata: Basic Presentation
27
© 2008 Brightcove, Inc. All rights reserved. 27 Content Settings & Metadata: Economics & Distribution
28
© 2008 Brightcove, Inc. All rights reserved. 28 Content Settings & Metadata: Scheduling and Geo Filtering
29
© 2008 Brightcove, Inc. All rights reserved. 29 Content Settings & Metadata: Logo Overlay
30
© 2008 Brightcove, Inc. All rights reserved. 30 Playlist Creation & Settings
31
© 2008 Brightcove, Inc. All rights reserved. 31 Player Creation Check this for access to the APIs A high number of support calls come in simply because this setting has not be selected!!!
32
© 2008 Brightcove, Inc. All rights reserved. 32 Player Settings
33
© 2008 Brightcove, Inc. All rights reserved. 33 Player Settings
34
© 2008 Brightcove, Inc. All rights reserved. 34 Player Settings
35
© 2008 Brightcove, Inc. All rights reserved. 35 Player Settings
36
© 2008 Brightcove, Inc. All rights reserved. 36 Player Customization Best Practices Consider 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
37
© 2008 Brightcove, Inc. All rights reserved. 37 Standard Player Templates
38
© 2008 Brightcove, Inc. All rights reserved. 38 Standard Player Templates
39
© 2008 Brightcove, Inc. All rights reserved. 39 Standard Player Templates
40
© 2008 Brightcove, Inc. All rights reserved. 40 Player Styling in the BC3 Studio Style Editor
41
© 2008 Brightcove, Inc. All rights reserved. 41 Player Publishing
42
Exercise 1: The Brightcove Studio
43
© 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 Guidelines Your account: www.brightcove.comwww.brightcove.com Videos are located in C:\XAMPP\Videos
44
Referencing Players, Playlists and Videos
45
© 2008 Brightcove, Inc. All rights reserved. 45 Component IDs Are Unique IDs Enable you to control experiences Quickly 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
46
© 2008 Brightcove, Inc. All rights reserved. 46 Getting the ID
47
© 2008 Brightcove, Inc. All rights reserved. 47 The ID in Player HTML Publishing Code playerID=1847353697
48
© 2008 Brightcove, Inc. All rights reserved. 48 The ID in Player JavaScript Publishing Code
49
© 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["width"] = 650; config["height"] = 630;
50
© 2008 Brightcove, Inc. All rights reserved. 50 Assigning Content To A Player using IDs single videoSingle Video template For a single video in a Single Video template: single videoreference ID For a single video, using its reference ID: one playlistmulti-playlist template For one playlist in a multi-playlist template: multiple playlists For multiple playlists:
51
Section II: Customizing Players
52
© 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
53
© 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.
54
© 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.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
55
© 2008 Brightcove, Inc. All rights reserved. 55 Creating A Player Template
56
© 2008 Brightcove, Inc. All rights reserved. 56 BEML Code Validation
57
© 2008 Brightcove, Inc. All rights reserved. 57 BEML Code Validation Who can spot the error?
58
The Elements of BEML
59
© 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).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: Labels Themes and Styles Layouts Components Modules
60
© 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/)http://www.w3.org/XML/ The XML FAQ (http://xml.silmaril.ie/)http://xml.silmaril.ie/ XML at Wikipedia (http://en.wikipedia.org/wiki/XML)http://en.wikipedia.org/wiki/XML
61
© 2008 Brightcove, Inc. All rights reserved. 61 BEML: UI Elements
62
© 2008 Brightcove, Inc. All rights reserved. 62 BEML: Labels Labels element: Customize and localize text Can customize the text of every label in your player Styling Branding Promotion Other Can create a player with labels in most languages
63
© 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 fileSet 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 CSSSet styles for individual components using Style elements with in-line CSS.
64
© 2008 Brightcove, Inc. All rights reserved. 64 BEML: Layout Layout element: Customize positioning included positioned Control which UI elements are included in a player and where they are positioned within the player Canvas HBox VBox Grid
65
© 2008 Brightcove, Inc. All rights reserved. 65 BEML: Layout Canvas The simplest of the layout boxes Child elements in a Canvas are positioned absolutely within the canvas box at the (x, y) position specified in the child element HBox A horizontal box that lays out all its child elements horizontally Child 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 VBox A vertical box that lays out all its child elements vertically Child 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 Grid A layout box that allows for a more complex layout Child elements laid out in columns and rows
66
© 2008 Brightcove, Inc. All rights reserved. 66 BEML Exercises Go to the BEML Section in the Sandbox Top Menu BC3Lingo - Brightcove3 UI Translation Tool Simple BEML Player Localizing A Player With BEML Localized Player with BEML + External XML BEML Compact Tabbed Player BEML Localization XML BEML Custom Example 1 BEML Custom Example 2 After this, we’ll take an in-depth look at some of the features used in these templates
67
Creating a simple BEML template
68
© 2008 Brightcove, Inc. All rights reserved. 68 Creating A Simple BEML Template Specify 486 x 412 Pixels Size
69
© 2008 Brightcove, Inc. All rights reserved. 69 Creating A Simple BEML Template - Result
70
Localizing a player with BEML
71
© 2008 Brightcove, Inc. All rights reserved. 71 Localizing A Player With BEML Go! Go!
72
© 2008 Brightcove, Inc. All rights reserved. 72 Localizing A Player With BEML – External XML
73
© 2008 Brightcove, Inc. All rights reserved. 73 Localizing A Player With BEML – External XML PLAY PLAY PAUSE PAUSE MENU MENU Play Play Pause Pause …
74
© 2008 Brightcove, Inc. All rights reserved. 74 BEML Custom Example 1
75
© 2008 Brightcove, Inc. All rights reserved. 75 BEML Custom Example 1 - Result
76
© 2008 Brightcove, Inc. All rights reserved. 76 BEML Custom Example 1 - Code <List id='videoList' rowHeight='52' automaticAdvance='true' data='{playlistTabs.selectedItem.videoDTOs}' selectOnClick='true' itemInsetH='2' itemInsetV='2' itemLeading='1'>
77
© 2008 Brightcove, Inc. All rights reserved. 77 BEML Custom Example 1 - Result boxType=‘vBox’ First vertical element Second vertical element = hBox First element of hBox Within vBox 2 nd Element = videoPlayer Second element of hBox Within vBox 2 nd Element = videoList
78
© 2008 Brightcove, Inc. All rights reserved. 78 BEML Custom Example 2
79
© 2008 Brightcove, Inc. All rights reserved. 79 BEML Custom Example 2 - Result
80
© 2008 Brightcove, Inc. All rights reserved. 80 BEML Custom Example 2 - Code <TileList id='videoList' width='100' height='316' automaticAdvance='true' selectOnClick='true' rowHeight='60' columnWidth='78' numRows='4' useBlur='true' scrollDirection='vertical'> <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}' />
81
© 2008 Brightcove, Inc. All rights reserved. 81 BEML for the Standard Compact Tabbed Navigation
82
© 2008 Brightcove, Inc. All rights reserved. 82 BEML for the Standard Compact Tabbed Navigation
83
© 2008 Brightcove, Inc. All rights reserved. 83 BEML for the Standard Compact Tabbed Navigation <List id='videoList' rowHeight='78' automaticAdvance='true' data='{playlistTabs.selectedItem.videoDTOs}' selectOnClick='true' itemInsetV='4' itemLeading='2'> …
84
© 2008 Brightcove, Inc. All rights reserved. 84 Single Title Player With Hidden Playlist video="{videoList.selectedItem}" data='{playlistTabs.selectedItem.videoDTOs}'
85
Data Binding
86
© 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:
87
© 2008 Brightcove, Inc. All rights reserved. 87 Data Binding Elements ComponentBinding ObjectDescription TabBar, List and TileList selectedItemThe currently selected item. ListItemcurrentItemThe data that corresponds to the ListItem's position in its parent list. VideoPlayer and VideoDisplay videoThe video currently loaded in the player.
88
© 2008 Brightcove, Inc. All rights reserved. 88 Data Binding Examples A Label displaying the name of the video currently loaded in the player: <Label text="{videoPlayer.selectedItem.displayName}" width="160" height="40" text="{videoPlayer.selectedItem.displayName}" type="title" />
89
© 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: : <ListItem id="videoItem" boxType="hbox" padding="5" gutter="10">
90
The Player API
91
© 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
92
© 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.Player API Reference help.brightcove.com
93
© 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
94
© 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
95
The Player API & JavaScript
96
© 2008 Brightcove, Inc. All rights reserved. 96 JavaScript Approach In Brightcove Studio Get 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
97
© 2008 Brightcove, Inc. All rights reserved. 97 Studio Generated JS Code
98
© 2008 Brightcove, Inc. All rights reserved. 98 Studio Generated JS Code Enable API (JS Part) Player Ref ID Assign Content
99
© 2008 Brightcove, Inc. All rights reserved. 99 Assigning Content // for a single video in a Single Video template: // for a single video, using its reference ID: // for one playlist in a multi-playlist template: // for multiple playlists:
100
© 2008 Brightcove, Inc. All rights reserved. 100 Getting JS Object References 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); }
101
© 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_REA DY, onTemplateReady); modExp.addEventListener(BCExperienceEvent.CONTENT_LOA D, onContentLoad); modContent.addEventListener(BCContentEvent.VIDEO_LOAD, onVideoLoad); }
102
© 2008 Brightcove, Inc. All rights reserved. 102 JS Event Handlers (2) onTemplateReady(evt) function onTemplateReady(evt) { alert("EVENT: TEMPLATE_READY"); } onContentLoad(evt) function onContentLoad(evt) { alert("EVENT: CONTENT_LOAD"); var currentVideo = modVP.getCurrentVideo(); alert("INFO: Currently Loaded videoID: " + currentVideo.id); modContent.getVideoAsynch(1488633950); }
103
© 2008 Brightcove, Inc. All rights reserved. 103 JS Event Handlers (3) onVideoLoad(evt) function onVideoLoad(evt) { alert("EVENT: VIDEO_LOAD"); // Play video that was just loaded modVP.loadVideo(evt.video.id); }
104
© 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); onEmailSent modMenu.addEventListener(BCMenuEvent.SEND_EMAIL_CLICK, onEmailSent); } onEmailSent(evt) function onEmailSent(evt) { alert("An Email was sent!"); }
105
Exercise 2: Using the Player API - JavaScript
106
© 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 PlaylistPlayer API - CMS Integration Widget ExamplePlayer API: Dynamically Selecting A VideoPlayer 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
107
© 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
108
© 2008 Brightcove, Inc. All rights reserved. 108 CMS Integration Widget Example if ( !array_key_exists('video', $arguments) ) { return ' Brightcove Player Widget Error: Required parameter "video" is missing! '; 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.= “ <param name="flashvars" value="@videoPlayer=$video&playerID=$player&domain=embed&" /> … return $output; }
109
© 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; …
110
© 2008 Brightcove, Inc. All rights reserved. 110 Dynamically Selecting A Video function getPlayerHTML($video) { $html = " Dynamic Video Example…. "; return $html; }
111
© 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
112
© 2008 Brightcove, Inc. All rights reserved. 112 Vanilla Player With JavaScript Playlist …
113
The Player API & ActionScript
114
© 2008 Brightcove, Inc. All rights reserved. 114 ActionScript Approach In Brightcove Studio: Get the publishing code Enable the APIs Assign content In ActionScript: Include BrightcovePlayer.as Get references to player components Load content Listen for user interaction events FullScreen switching
115
© 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
116
© 2008 Brightcove, Inc. All rights reserved. 116 ActionScript Approach: 1 – Create AS3 Project
117
© 2008 Brightcove, Inc. All rights reserved. 117 ActionScript Approach: 2 – Create AS3 File In Project This file MUST be called BrightcovePlayer.as
118
© 2008 Brightcove, Inc. All rights reserved. 118 ActionScript Approach: 3 – Get The Publish AS3 Code
119
© 2008 Brightcove, Inc. All rights reserved. 119 ActionScript Approach: 3 – Get The Publish AS3 Code
120
© 2008 Brightcove, Inc. All rights reserved. 120 ActionScript Approach: 4 – Paste into AS3 File
121
© 2008 Brightcove, Inc. All rights reserved. 121 ActionScript Approach: 5 – Instantiate Player in TimeLine
122
© 2008 Brightcove, Inc. All rights reserved. 122 ActionScript Approach: 6 – Set Dimensions
123
© 2008 Brightcove, Inc. All rights reserved. 123 Using The Studio Generated ActionScript Code import flash.display.*; import flash.events.Event; import BrightcovePlayer; public class Main extends Sprite { var mPlayer:Object; var mContent:Object; var mExp:Object; var bcp:BrightcovePlayer = new BrightcovePlayer(); … public function Main() { bcp.addEventListener ("templateLoaded", templateLoaded); addChild (bcp); } …
124
© 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); }
125
© 2008 Brightcove, Inc. All rights reserved. 125 Loading Content public function templateLoaded (evt:Event):void { mPlayer = bcp.getModule("videoPlayer"); mContent = bcp.getModule("content"); mExp = bcp.getModule("experience"); contentLoad); mExp.addEventListener ("contentLoad", contentLoad); videoLoad mContent.addEventListener ("videoLoad", videoLoad); } contentLoad public function contentLoad (evt:Event):void { var video:Object; mContent.getVideoAsynch (0123456789); } videoLoad public function videoLoad(evt:Object):void { mPlayer.loadVideo(evt.video.id); }
126
© 2008 Brightcove, Inc. All rights reserved. 126 Listening For User Interaction public function templateLoaded(evt:Event):void { mMenu = bcp.getModule("menu"); emailSent mMenu.addEventListener("sendEmailClick", emailSent); } emailSent(evt:Event): public function emailSent(evt:Event):void { trace("An email was sent!"); }
127
© 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.align = StageAlign.TOP_LEFT; public function templateLoaded(evt:Event):void { mPlayer = bcp.getModule("videoPlayer"); mPlayer.goFullScreen(true); }
128
Exercise 3: Using the Player API - ActionScript
129
© 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
130
© 2008 Brightcove, Inc. All rights reserved. 130 Player API ActionScript Examples Advanced Section in your Sandbox Top Menu
131
© 2008 Brightcove, Inc. All rights reserved. 131 Advanced Player API: Subtitling
132
© 2008 Brightcove, Inc. All rights reserved. 132 Advanced Player API: 3D TV
133
Section III: The Media API
134
© 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
135
© 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&to ken=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8Ehttp://api.brightcove.com/services/library?command=find_all_videos&to ken=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8E.
136
© 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
137
© 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 https://help.brightcove.com/request-support.cfm
138
© 2008 Brightcove, Inc. All rights reserved. 138 Media API Data Format Data is formatted as JSON strings (JavaScript Object Notation) JSON A 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.
139
© 2008 Brightcove, Inc. All rights reserved. 139 Example JSON String {"items":[{"creationDate":"1171267200000","economics ":"FREE","id":49518762,"lastModifiedDate":"1171324 536445","length":111077,"linkText“null,"linkURL":null, "longDescription":null,"name":"DocumentarianSkydivi ng","playsTotal":189,"playsTrailingWeek":3,"publishe dDate":"117324433253","referenceId":"title006","rele aseDate":null,“…..
140
The Media API – Read Methods
141
© 2008 Brightcove, Inc. All rights reserved. 141 Read API – Typical Applications Contextual Publishing Displaying Video Metadata in the embedding web page Search Engine Optimization Using Metadata to optimize Search Engine pickup CMS Integration Integrating Metadata into your Corporate CMS Syndication Integrating your content into other portals & sites See Also Presenting relevant content the user could be interested in
142
© 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 API HTTP GET Request in REST Format Must provide READ Token Read API Parameters All Read API Functions are defined in the online reference: https://help.brightcove.com/developer/docs/mediaapi/media-API.cfm
143
© 2008 Brightcove, Inc. All rights reserved. 143 The Main READ API’s Video READ find_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 READ find_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
144
© 2008 Brightcove, Inc. All rights reserved. 144 Video READ API – Detailed Excerpt FunctionParametersDescription 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
145
© 2008 Brightcove, Inc. All rights reserved. 145 Displaying Metadata Make the API Call For example, find_all_videos Parse the returned JSON String Check for errors Loop though the returned collection Insert Into the Web Page Apply Styling & Formatting
146
Exercise 4: Using the Read API - Part 1
147
© 2008 Brightcove, Inc. All rights reserved. 147 Exercise 4: Using the Read API - Part 1 We’ll be using a local desktop web server Main Page: http://localhosthttp://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
148
Exercise 4: The Read API - Part 2
149
© 2008 Brightcove, Inc. All rights reserved. 149 Exercise 4: The Read API - Part 2 Add Simple Search Functionality Add a simple form to ask for a search term Search the Name & Description field of Videos Which Method Will We Use Now? Check the Media API Reference Objective: No player on the page Write an HTML page with a Search form Call the FindVideosByText method Return 5 videos and display the titles and thumbnails Check details for Exercise Two on your local web server
150
© 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 Approaches Add Descriptions as HTML Text Add Tags as HTML Links Provide a unique URL for each item CMS Integration Provide RSS Feeds Context Publishing
151
Exercise 4: The Read API - Part 3
152
© 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
153
The Media API – Write Methods
154
© 2008 Brightcove, Inc. All rights reserved. 154 Write API – Typical Applications Batch uploading Uploading your existing media library into Brightcove Uploading User Generated Content into Brightcove Integrating Social Networking Tools Rating, Digg, MySpace, FaceBook, etc. Data Consolidation Populating ReferenceID’s with your Database’s UID Populating Descriptions, tags, etc Campaign Management Switching Status of series of Videos Moderation Giving moderators the options they need without access to the Brightcove Console
155
Exercise 5: Writing an Ingestion Tool
156
© 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
157
© 2008 Brightcove, Inc. All rights reserved. 157 Advanced Media API : SEO
158
© 2008 Brightcove, Inc. All rights reserved. 158 Advanced Media API: CMS Integration
159
© 2008 Brightcove, Inc. All rights reserved. 159 Advanced Media API: Custom Upload + User Accounts
160
© 2008 Brightcove, Inc. All rights reserved. 160 REFERENCE
161
© 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
162
© 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
163
© 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
164
© 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
165
© 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
166
© 2008 Brightcove, Inc. All rights reserved. 166 Answer - Read API: Exercise 4 RSS Example Code Lift Off News http://liftoff.msfc.nasa.gov/ Liftoff to Space Exploration. en-us Tue, 10 Jun 2003 04:00:00 GMT Tue, 10 Jun 2003 09:41:01 GMT http://blogs.law.harvard.edu/tech/rss Weblog Editor 2.0 editor@example.com webmaster@example.com ….
167
© 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
168
© 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 resolutions This 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
169
© 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
170
© 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
171
© 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 Documentation https://help.brightcove.com/developer/docs/mediaapi/objects.cfm
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.