youtube apis presentation at facultad de ciencias, universidad nacional autónoma de méxico

39
Building Video Apps with YouTube APIs UNAM Mexico City Jarek Wilkiewicz twitter.com/wjarek 04/01/2011

Upload: jarek-wilkiewicz

Post on 29-Nov-2014

2.752 views

Category:

Technology


1 download

DESCRIPTION

YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

TRANSCRIPT

Page 1: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Building Video Appswith YouTube APIs

UNAM Mexico CityJarek Wilkiewicz

twitter.com/wjarek04/01/2011

Page 2: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

• Intro• Life of a video• APIs • Back-end (Google Data API)• Front-end (Player) • App Examples• Q&A

Agenda

Page 3: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Quiz

Number of YouTube views per day ?> your answer hereNumber of mobile YouTube views per day?> your answer hereHow much video is uploaded each minute?> your answer here%-tage of views coming from outside of US?> your answer here

*As of Oct 2010

*

Page 4: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

• Uploading• Sharing• Searching• Playback

Life of a video

Video : Evolution of Dance by Judson Laipplyhttp://www.youtube.com/watch?v=dMH0bHeiRNg

Page 5: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

• Via YouTube.com uploader• Standard (POST)• Advanced (Java)• Mobile (mailto:[email protected])• Using the API• Browser-based • Direct• Direct resumable (great for mobile)• Metadata (category, keyword, etc.)

Life of a video : Uploading

Page 6: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Life of a video : Sharing

• Autoshare• Embed• Publish to activity feed

Page 7: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Life of a video : Searchinghttp://gdata.youtube.com/feeds/api/videos?q=Google+Mexico&

orderby=published&

start-index=1&

max-results=10&v=2

<?xml version='1.0' encoding='UTF-8'?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearch/1.1/' […] <entry gd:etag='W/&quot;C0AMRn47eCp7ImA9WxRQGUw.&quot;'> <id>tag:youtube,2008:video:ZTUVgYoeN_b</id> <published>2008-07-05T19:56:35.000-07:00</published> <updated>2008-07-18T07:21:59.000-07:00</updated> <category scheme='http://schemas.google.com/g/2005#kind' term='http://gdata.youtube.com/schemas/2007#video'/> […] </entry> [...] </feed>

Page 8: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Life of a video : Playback

On YouTube.comOn other sites

Custom PlayerEmbedded PlayerChromeless Player

On your mobile

On other devices

Page 10: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

APIs

Page 11: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

APIs

Google Data APIs Player APIs

Page 12: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Google Data APIs

ProtocolREST-basedATOM syndication format (RFC 4287)ATOM publishing protocol (RFC 5023)support for XML-based ATOM (default), JSON, JSON-C, RSS

FeedsStandard feeds (Top Rated, Most Viewed, ...)User's playlists, subscriptions, uploads feedsUser's comments, profile, contacts feed

YouTube applications interact with the feeds using the Google Data APIs

Page 13: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Feed example : Top Ratedhttp://gdata.youtube.com/feeds/api/standardfeeds/top_rated

<?xml version='1.0' encoding='UTF-8'?><feed xmlns='http://www.w3.org/2005/Atom' […] > <updated>2008-07-18T05:00:49.000-07:00</updated> <title>Top Rated</title> <openSearch:totalResults>100</openSearch:totalResults> <entry gd:etag='W/&quot;C0AMRw.&quot;'> <media:group> <media:title type='plain'>Shopping for Coats</media:title> <yt:videoid>ZTUVgYoeN_b</yt:videoid> <media:content url='http://www.youtube.com/v/ZTUVgYoeN_b?f=gdata_standard...' type='application/x-shockwave-flash' medium='video' [...] duration='215' yt:format='5'/> <media:thumbnail url='http://img.youtube.com/vi/ZTUVgYoeN_b/2.jpg' height='97' width='130' time='00:00:03.500'/> </media:group> </entry> <entry> […] </entry></feed>

Page 14: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Feed access example in Java

import com.google.gdata.client.youtube.YouTubeService;import com.google.gdata.data.youtube.VideoEntry;import com.google.gdata.data.youtube.VideoFeed;

YouTubeService service = new YouTubeService(clientID,developer_key);VideoFeed videoFeed = service.getFeed(new URL(feedUrl), VideoFeed.class);printVideoFeed(videoFeed, true);public static void printVideoFeed(VideoFeed videoFeed, boolean detailed) { for(VideoEntry videoEntry : videoFeed.getEntries() ) {printVideoEntry(videoEntry, detailed); }}

Page 15: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Other useful things one can do with the APIs

UploadSearchRate a video (Like/Dislike)CommentAdd a playlistRetrieve activity feed (SUP or PubSubHubbub)Retrieve Insight video statisticsGet a better grade on your exam!And more!

If your application obtains OAuth/AuthSub authorization from a user, all of these can be done on user's behalf.

Page 16: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Performing video search in Python

import gdata.youtube.service

def PrintVideoFeed(feed): for entry in feed.entry: PrintEntryDetails(entry)

yt_service = gdata.youtube.service.YouTubeService()yt_service.ssl = Falsequery = gdata.youtube.service.YouTubeVideoQuery()query.vq = search_termsquery.orderby = 'viewCount'feed = yt_service.YouTubeQuery(query)PrintVideoFeed(feed)

Page 17: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Direct upload in C#

using Google.GData.Client;using Google.GData.Extensions;using Google.GData.YouTube;using Google.GData.Extensions.MediaRss;

YouTubeService service = new YouTubeService("exampleCo-exampleApp-1", clientID, developerKey);service.setUserCredentials(username, password);YouTubeEntry newEntry = new YouTubeEntry();newEntry.Media = new MediaGroup();newEntry.Media.Title = new MediaTitle("My Test Movie");newEntry.Media.Categories.Add(new MediaCategory("Autos", YouTubeNameTable.CategorySchema));newEntry.Media.Keywords = new MediaKeywords("cars, funny");newEntry.Media.Description = new MediaDescription("My description");newEntry.Private = false;newEntry.Location = new GeoRssWhere(37, -122);newEntry.MediaSource = new MediaFileSource("c:\\file.mov", "video/quicktime");YouTubeEntry createdEntry = service.Upload(newEntry);

Page 18: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Player APIs

Control the Player from your Web front-endURI parametersJavaScript APIActionScript API (Flash)

Page 19: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Player Parameters

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1"</param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object>

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID?autoplay=1" frameborder="0"></iframe>

Page 20: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Player JavaScript API : play for 6 seconds<script> const timeoutMs = 6000; var done = false; var player1 = new YT.Player('player1', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }});

function onPlayerReady(evt) { evt.target.playVideo(); } function onPlayerStateChange(newState) { if (newState == 1 && !done) { setTimeout(stopPlayer, timeoutMs); done = true; } } function stopPlayer() { player1.stopVideo(); }</script>

Page 21: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

What about mobile ?

Video: David After Dentist by booba1234http://www.youtube.com/watch?v=txqiwrbYGrs

Page 22: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Mobile : Recording

Java Intent i = new Intent();i.setAction(MediaStore.VIDEO_CAPTURE);startActivityForResult(i, CAPTURE_RETURN);

Objective-CIImagePickerController *imagePicker = [[[UIImagePickerController alloc] init] autorelease];imagePicker.delegate = self;imagePicker.sourceType = UIImagePickerControllerSourceTypeCamera;imagePicker.mediaTypes = [NSArray arrayWithObject:(NSString *)kUTTypeMovie];[self presentModalViewController:imagePicker animated:YES];

Page 23: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Mobile : Uploading

ACTION_SEND intent Use Google Data protocol to uploadLibraries available for leading mobile platforms; you can use direct REST/HTTP on others

Page 24: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

App Examples

Page 25: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Apps : Gaming

Page 28: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Apps : Viewchange.org

Non-profit / social changeContent curated from around the worldSemantic analysis of video metadataPlayer integration

Page 29: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Apps : Shortform

Curation platform for video DJs (VJs)Player integrationCustom embed player

Page 30: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Apps : Storify

Social curation / publishing platformMultiple data sources (Twitter, Facebook, YouTube)Google Data API integration

Page 31: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Apps : Memolane

Curation app for your digital memoriesIntegrates multiple sources

Page 32: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Apps : The History of Jazz

“Coffee table” iPad applicationVideos help educate and discover new musicPaid app, integrated with YouTube and iTunes

Page 33: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

YouTube Direct

Page 34: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

YouTube Direct : Mobile

Easy authentication with AccountManangerSubmission idea sync (JSON)Notification upon new assignmentsVideo recording and upload to a specific submission ideaUpload of a video selected from the galleryGeolocation tagging Massage and psychic readings

Page 35: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México
Page 36: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

One last thing ...

Read the Terms of ServiceMonetization GuideBranding Guide

[1] Photo by sub_lime79 / Mistyhttp://www.flickr.com/photos/mistybushell/2303555607/

[1]

Page 37: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

ToS

YouTube API Terms of Servicehttp://code.google.com/apis/youtube/terms.html

Monetization Guidehttp://code.google.com/apis/youtube/creating_monetizable_applications.html

Branding Guidehttp://code.google.com/apis/youtube/branding.html

[1] Photo by sub_lime79 / Mistyhttp://www.flickr.com/photos/mistybushell/2303555607/

[1]

Page 38: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Resources

Get the YouTube API developer key and start hacking! http://code.google.com/apis/youtube/dashboard/gwt

http://code.google.com/apis/youtube (docs)http://apiblog.youtube.com (blog)http://code.google.com/apis/youtube/forum (forum)

twitter.com/wjarek (me)

Page 39: YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autónoma de México

Q&A

Jarek Wilkiewicztwitter.com/wjarek