Gdd Yt Lecture Wave2 1

Build YOUR YouTube Nicola Ferioli Customer Solutions Engineer October, 2008

Why use the API?

• Video hosting is hard • Building a repository of videos takes time • YouTube.com provides free exposure

3

Why did we create the API?

• To create an online video community • Upload from anything, syndicate anywhere • We're not white label hosting • Syndicated content is branded

4

Build YOUR YouTube All the functionality of YouTube, available on your web site • Search YouTube • Find relevant videos • Manage favorites, playlists, subscriptions, etc. • Upload videos All the functionality to integrate into YOUR website • Watch Videos • Chromeless player • Play/pause/stop… 5

Agenda Interacting with YouTube YouTube Data APIs 1. Read functions 2. Write functions 3. Upload functions

Integrating YouTube into your website 1. Embedded Player 2. Chromeless Player 3. Player controls

6

YouTube Data API 1. Read Functions

GData Protocol

• Simple standard protocol for reading and writing data on the web

• Based on AtomPub • RESTful API built on XML and HTTP Schema Atom Syndication Format Open Search Schema Yahoo! Media RSS Module YouTube XML Schema Google Data Schema

8

Namespace Prefix [None] - this is the default namespace openSearch media yt gd

Schema URL http://www.w3.org/2005/Atom http://a9.com/-/spec/opensearchrss/1.0/ http://search.yahoo.com/mrss/ http://www.youtube.com/schemas/yt/0.2 http://schemas.google.com/g/2005

Friendster

9

iPhone

10

Data API Feeds

Videos search, related, responses, standardfeeds

User playlists, contacts, profiles, messages, subscriptions

11

Video Feeds • Video feeds represent a set of videos – Search results – Standard feeds – Related videos – User favorites – User uploads – Playlist contents – Video responses

12

Video Feeds

13

Video Feeds

14

Video Feeds http://gdata.youtube.com/…/standardfeeds/most_viewed … 100 1 25 <entry> http://…/feeds/api/videos/dMH0bHeiRNg … … judsonlaipply… … <media:group> … … <entry> http://…/feeds/api/videos/cQ25-glGRzI … … 15

Video Feeds <entry> http://…/feeds/api/videos/dMH0bHeiRNg … … The funniest 6 minutes… <media:group> …

16

Video Feeds … <media:group> ... <media:content url='http://www.youtube.com/v/dMH0bHeiRNg‘ type='application/x-shockwave-flash' medium='video‘ isDefault='true‘ expression='full' duration='360‘ yt:format='5'/> … <media:player url='http://youtube.com/watch?v=dMH0bHeiRNg'/> <media:thumbnail url='http://img.youtube.com/vi/dMH0bHeiRNg/2.jpg‘ height='97' width='130' time='00:03:00'/> … 17

Search

18

Search /feeds/api/videos?vq=<search> • Category/tag: http://gdata.youtube.com/feeds/api/videos/-/News http://gdata.youtube.com/feeds/api/videos/-/cute

• Re-order: “relevance”, “published”, “viewCount”, “rating” http://gdata.youtube.com/feeds/api/videos?vq=chat&orderby=relevance_lang _fr

• Restrict language: lr http://gdata.youtube.com/feeds/api/videos?vq=chat&lr=fr 19

Search

• Restrict format: http://gdata.youtube.com/feeds/api/videos?vq=chat&format =5

• Flash embeddable (format 5) • Mobile formats over RTSP – H.263 with AMR audio (format 1) – MPEG-4 SP with AAC audio (format 6)

20

Standard feeds

21

Standard feeds /feeds/api/standardfeeds/ • Feeds: featured, most viewed, top rated, …

http://gdata.youtube.com/feeds/api/standardfeeds/most_vi ewed

• Localised: http://gdata.youtube.com/feeds/api/standardfeeds/IT/top_ rated

• Time window: today, this week, … http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?time =today

• Category: http://gdata.youtube.com/feeds/api/standardfeeds/top_rated_Sports 22

Related Videos

23

Related Videos /feeds/api/videos//related • Returns a list of videos related to the video id

24

User Feeds

25

User Feeds

26

Playlists

27

Playlists /feeds/api/users/<username>/playlists • Each playlist has: - Title - Description - Tags - pointing to playlist contents <entry> A few videos from snowboarding at Squaw Valley on April 26, 2008 28

Playlist contents /feeds/api/playlists/ • Almost identical to search results, standard feeds, etc. • Playlist contents have

<entry> ... 1 <entry> … 2 29

Subscriptions

30

Subscriptions /feeds/api/users/<username>/subscriptions • There are multiple types of subscriptions: - Channel - Favorites - Search query

31

Subscriptions <entry> http://…/users/mortms/subscriptions/ac3a969d054c3f98 lonelygirl15 <entry> http://…/users/mortms/subscriptions/83bd95e382641fc2 virginia tech 32

Favorites and User Uploads

33

Favorites and User Uploads /feeds/api/users/<username>/favorites • Simple

collection of videos marked as “Favorite” by user

/feeds/api/users/<username>/uploads • Set of videos uploaded by the user - If not logged in – returns live, public videos only - If logged in – returns all user’s uploads

34

Projections • Projections allow you to get just the data you’re interested in:

http://gdata.youtube.com/feeds/api/...

• All relevant data, using plain text instead of HTML http://gdata.youtube.com/feeds/base/...

• Simple responses with HTML for display http://gdata.youtube.com/feeds/mobile/...

• Most compact responses for low-bandwidth mobile devices.

35

How fresh are the results? • Search results can be outdated

• Latency has been greatly improved!

• New videos appears in minutes • Statistics may take longer • Direct access to video gives fresh data 36

Errors 404 Not Found

• When:

- resource does not exist - resource has been deleted

• What to do:

- be ready - let the user know - with a nice message 

37

Errors 503 Service Unavailable

• When:

- “ Houston, we have a problem! ” - we're doing maintenance

• What to do:

- retry once immediately - give up... but let your user knowh

38

Embedded Player Example

39

YouTube Data API 2. Write Functions

Why should users log in? • Access to restricted information – Private videos – Private playlists – Inbox (video sharing) – Status of videos being processed

• Required for all write operations – Modify favorites, playlists, subscriptions – Rate, comment, respond to videos – Upload and manage videos

41

Login Two ways to sign in:

• Web applications use AuthSub – Users log in on a Google web page – Browser gets redirected back to your site with authentication token

• Installed applications use ClientLogin – Users enter credentials in your application – Your application makes a login request – Your application gets issued a temporary authentication token

42

AuthSub

1. Redirect user to AuthSub authentication page https://www.google.com/accounts/AuthSubRequest? https://www.google.com/accounts/AuthSubRequest?

43

– – – –

next=http://www.example.com/yt_integration scope=http://gdata.youtube.com session=1 secure=0

AuthSub

44

AuthSub 2. Receive token http://www.example.com/yt_integration?token=

3. Exchange for session token https://www.google.com/accounts/AuthSubSessionToken

4. Add Authorization header to requests Authorization: AuthSub token="my token"

45

Errors 401 Not Authorized

• When:

- you need to log in - you need to log in AGAIN

• What to do:

- ask your user to log in - expect it at any time

46

Write - Basic operations • Make POST requests to create a new entry: – Favorite – Playlist or playlist item – Subscription – Comments & Responses – Contacts

• Some feeds are write-only – Ratings – Complaints

47

Developer Key Write operations require a developer key and a clientID Authorization: AuthSub token=“” X-GData-Key: key=<developer-key> X-GData-Client: key=

Register your application to receive a developer key http://code.google.com/apis/youtube/dashboard

48

Write Example Add a favorite video to a user's account POST /feeds/api/users/default/favorites HTTP/1.1 Host: gdata.youtube.com X-GData-Key: key=<developer-key> X-GData-Client: key= Authorization: AuthSub token="" Content-Type: application/atom+xml <entry xmlns='http://www.w3.org/2005/Atom'> [video_id]

49

YouTube Data API 3. Upload Functions

Animoto

51

Animoto

52

YouTube-enabled devices

53

Upload Two models for upload

• Direct Upload – For installed applications – For web apps, if you have (or want) a copy of the video

• Browser Upload – For web apps only – Your app controls the metadata – User uploads the video directly to YouTube

54

Direct Upload POST /feeds/api/users/default/uploads HTTP/1.1 Host: uploads.gdata.youtube.com X-GData-Key: key=<developer-key> X-GData-Client: key= Authorization: AuthSub token="" Content-Type: multipart/related; boundary=ArbitraryString Slug: original_file.mp4 --Arbitrary-String Content-Type: application/atom+xml <entry>... --Arbitrary-String Content-Type: video/mp4 Content-Transfer-Encoding: binary

55

[Binary data of file] --Arbitrary-String--

Browser Based Upload • Process work-flow

56

Browser Based Upload • POST Metadata (including developer tags)

POST /actions/GetUploadToken HTTP/1.1 X-GData-Key: key=<developer-key> X-GData-Client: key= Authorization: AuthSub token=“” Content-Type: application/atom+xml; charset=UTF-8 <entry> … <media:category scheme=http://.../schemas/2007/developertags.cat> my_user_id=john

• Receive upload URL and token



57

http://uploads.gdata.youtube.com/action/FormDataUpload/AIw … AIwbFAS…b9gtLCYjoE-

Browser Based Upload • Display upload form

Video File:

• User gets redirected to your site on completion http://mysite.com/upload_complete?status=200&id=GTdQIBGl Emg 58

Checking Video Status • Not public, so will not show up in public feeds • Retrieve from authenticated user uploads feed: GET /feeds/api/users/default/uploads/GTdQIBGlEmg HTTP/1.1 X-GData-Key: key=<developer-key> X-GData-Client: key= Authorization: AuthSub token=“”

• Check for status tags (not present means video is live): yes

• Also check when showing all of user’s uploads 59

Developer Tags • Developer tags allow you to track your uploads • Accessible only with your developer key • Can define your own taxonomy

60

<entry> ... <media:group> <media:category scheme='… /schemas/2007/developertags.cat'> my_user_id=john <media:category scheme=‘… /schemas/2007/developertags.cat'> type=test

Searching with developer tags • Developer tags are simply a category scheme • Search with standard category syntax – {category_scheme}category_name GET /feeds/api/videos/-/ {…/schemas/2007/developertags.cat}my_user_id=john HTTP/1.1 X-GData-Key: key=<developer-key> X-GData-Client: key=

61

Browser-Based Upload: Dogbook

62

Collecting Metadata

63

Collecting Metadata

64

Getting Video File

65

Getting Video File

66

Getting Video File

67

Getting Video ID

68

Marking Your Territory

69

Marking Your Territory

70

Errors 400 Bad Request

• When:

- your request is wrong

• What to do:

- check your request - check the error message - parse the XML error

71

<errors> <error> <domain>yt:validation too_long media:group/media:keywords/text() <error> <domain>yt:validation required media:group/media:title/text()

Client Libraries

• Java • PHP • .NET (C#) • Python

72

Client Library Snippet: PHP

$yt = new Zend_Gdata_YouTube() $videoFeed = $yt>getVideoFeed(Zend_Gdata_YouTube::STANDARD_TOP_RATED_URI) foreach ($videoFeed as $videoEntry) { echo ‘Video title: ‘ . $videoEntry->getVideoTitle() . “\n”;

73

Client Library Snippet: Python

yt = gdata.youtube.service.YouTubeService() yt.developer_key = ‘devkeyhere’ yt.client_id = ‘my-client-application-name’ yt.GenerateAuthSubURL(next, scope, secure, session) yt.SetAuthSubToken(authsub_token) yt.UpgradeToSession()

74

Integrating YouTube 4. Embedded Player

Embedded Player Features

• Control basic look • Create custom players based on playlists • Control with JavaScript or AS2

76

Embedded Player Example

77

Player Parameters Add border/colors http://www.youtube.com/v/VIDEO_ID?color1=0x2b405b&color2=0x6b8ab6&border =1

Hide related menu http://www.youtube.com/v/VIDEO_ID?rel=0

Start where the action starts http://www.youtube.com/v/VIDEO_ID?start=60

Annoy your users http://www.youtube.com/v/VIDEO_ID?loop=1&autoplay=1 78

Embedded and Custom Players Custom Players can be made on http://youtube.com/custom_player

79

Integrating YouTube

5. Chromeless Player

Chromeless Player

81

Karaoke!

http://karaoketube.vipinnova.com 82

Chromeless Player

83

Chromeless Player For ActionScript just load the player SWF http://www.youtube.com/apiplayer

For JavaScript use SWFObject swfobject.embedSWF("http://www.youtube.com/apiplayer ? enablejsapi=1",...)

• open source project, new standard for embedding Adobe Flash Player content

• checks Flash Player version, can offer alternative content or download option

• takes care of browser compatibility issues 84

Chromeless Player Implement onYouTubePlayerReady callback: function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById("myytplayer"); }

Video is not specified in SWF URL, use API methods: // loads and starts playing ytplayer.loadVideoById(videoId:String, startSeconds:Number) // loads video thumbnail and prepare to play ytplayer.cueVideoById(videoId:String, startSeconds:Number) // set player size ytplayer.setSize(width:Number, height:Number) 85

Integrating YouTube

6. Player Controls

Player Controls

• JavaScript & ActionScript2 • Issue commands to player • Listen for events • Poll status of player

87

Sample Functions

• playVideo / pauseVideo / stopVideo • seekTo • getCurrentTime / getDuration • getVideoBytesLoaded / getVideoBytesTotal

• Mute / unMute / isMuted • setVolume / getVolume 88

Player APIs Example

http://code.google.com/apis/youtube/chromeless_example_1.html 89

Synchronised Video and Slides

http://mg.to/ 90

Synchronised Video and Map

http://blog.deconcept.com/ytmapmashup/ 91

TimeTube

92

www.dipity.com/mashups/timetube

Video Search on your site

http://www.google.com/uds/solutions/wizards/videosearch.html 93

http://www.nextego.com

Galaxy

94

http://galaxy.tkaap.com/

Want to try it? http://code.google.com/p/yt-codelab/

95

But also!... • Annotations – Cat http://www.youtube.com/watch?v=kvBiSW5QFKY

– Guitar http://www.youtube.com/watch?v=dO-Bq01XtHM

• Subtitles http://www.youtube.com/watch?v=XraeBDMm2PM

96

Questions?

97

Learn more http://code.google.com

98