building video applications with youtube apis
DESCRIPTION
YouTube today is much more than a site. Using Google Data APIs and YouTube Player APIs, developers can harness the power of world’s most popular video destination to build new and innovative applications.TRANSCRIPT
![Page 1: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/1.jpg)
Building Video Appswith YouTube APIs
Silicon Valley CodeCampJarek Wilkiewicz
twitter.com/wjarek10/10/2010
![Page 2: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/2.jpg)
IntroLife of a videoAPIs
Back-end (Google Data API)Front-end (Player)
App ExamplesYouTube DirectYouTube Direct Mobile
Q&A
Agenda
![Page 3: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/3.jpg)
Quiz
Number of YouTube views per day ?<your answer here>
Number of mobile YouTube views per day?<your answer here>
How much video is uploaded each minute?<your answer here>
Is video application development hard ? *As of Oct 2010
*
![Page 4: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/4.jpg)
UploadingSharingSearchingPlayback
Life of a video
Video : Evolution of Dance by Judson Laipplyhttp://www.youtube.com/watch?v=dMH0bHeiRNg
![Page 5: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/5.jpg)
Via YouTube.com uploader�Standard (POST)Advanced (Java)Mobile (mailto:[email protected])
Using the APIBrowser-based DirectDirect resumable (great for mobile)
Metadata (category, keyword, description, location, etc.)
Life of a video : Uploading
![Page 6: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/6.jpg)
Life of a video : Sharing
AutoshareEmbedPublish to activity feed
![Page 7: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/7.jpg)
Life of a video : Searchinghttp://gdata.youtube.com/feeds/api/videos? q=football+-soccer &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/"C0AMRn47eCp7ImA9WxRQGUw."'> <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: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/8.jpg)
Life of a video : Playback
On YouTube.comOn other sites
Custom PlayerEmbedded PlayerChromeless Player
On your mobile
On other devices
![Page 9: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/9.jpg)
APIs
![Page 10: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/10.jpg)
APIs
Google Data APIs Player APIs
![Page 11: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/11.jpg)
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 12: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/12.jpg)
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/"C0AMRw."'> <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 13: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/13.jpg)
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 14: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/14.jpg)
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 statisticsCall KanyeAnd more!
If your application obtains OAuth/AuthSub authorization from a user, all of these can be done on user's behalf.
![Page 15: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/15.jpg)
Adding a playlist in PHP
<?phprequire_once 'Zend/Loader.php'; // the Zend dir must be in your include_pathZend_Loader::loadClass('Zend_Gdata_YouTube');[…] // authenticate$yt = new Zend_Gdata_YouTube($httpClient, $applicationId, $clientId, $developerKey);$newPlaylist = $yt->newPlaylistListEntry();$newPlaylist->description = $yt->newDescription()->setText('description of my new playlist');$newPlaylist->title = $yt->newTitle()->setText('title of my new playlist');// post the new playlist$postLocation = 'http://gdata.youtube.com/feeds/api/users/default/playlists';try { $yt->insertEntry($newPlaylist, $postLocation);} catch (Zend_Gdata_App_Exception $e) { echo $e->getMessage();}?>
![Page 16: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/16.jpg)
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: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/17.jpg)
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: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/18.jpg)
Player APIs
Control the Player from your Web front-endURI parametersJavaScript APIActionScript API (AS3, AS2 deprecated)
![Page 19: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/19.jpg)
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: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/20.jpg)
Player JavaScript API : load a video
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script type="text/javascript"> google.load("swfobject", "2.1");</script> [...]// The video to load.var videoID = "ylLzyHk54Z0"// Lets Flash from another domain call JavaScriptvar params = { allowScriptAccess: "always" };// The element id of the Flash embedvar atts = { id: "ytPlayer" };// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=player1", "videoDiv", "480", "295", "8", null, null, params, atts);
![Page 21: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/21.jpg)
Player JavaScript API : Events
function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById("ytPlayer"); ytplayer.addEventListener("onStateChange", "onPlayerStateChange"); ytplayer.addEventListener("onError", "onPlayerError");}function onPlayerStateChange(newState) { updateHTML("playerState", newState); updatePlayerInfo()}function updatePlayerInfo() { if(ytplayer) { updateHTML("videoDuration", ytplayer.getDuration()); updateHTML("videoCurrentTime", ytplayer.getCurrentTime()); updateHTML("bytesTotal", ytplayer.getVideoBytesTotal()); updateHTML("startBytes", ytplayer.getVideoStartBytes()); updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded()); }}
![Page 22: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/22.jpg)
Player API : ActionScript
private static const PLAYER_URL:String = "http://www.youtube.com/apiplayer?version=3";[…]
private function setupPlayerLoader():void { playerLoader = new SWFLoader(); playerLoader.addEventListener(Event.INIT, playerLoaderInitHandler); playerLoader.load(PLAYER_URL);}
private function playerLoaderInitHandler(event:Event):void { addChild(playerLoader); playerLoader.content.addEventListener("onReady", onPlayerReady); playerLoader.content.addEventListener("onError", onPlayerError);}
![Page 23: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/23.jpg)
What about mobile ?
Video: David After Dentist by booba1234http://www.youtube.com/watch?v=txqiwrbYGrs
![Page 24: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/24.jpg)
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 25: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/25.jpg)
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 26: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/26.jpg)
Mobile : Sharing, Searching, Playback
Sharing, SearchingJava Google Data Library Objective-C Google Data Library
PlaybackACTION_VIEW intent openURL method of the UIApplication
![Page 27: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/27.jpg)
One last thing ...
Read the Terms of ServiceMonetization GuideBranding Guide
[1] Photo by sub_lime79 / Mistyhttp://www.flickr.com/photos/mistybushell/2303555607/
[1]
![Page 28: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/28.jpg)
App Examples
![Page 29: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/29.jpg)
YouTube Direct : Overview
YouTube Direct (YTD) is an open source video submission platform that is built on top of the YouTube API and Google App Engine.
YTD has two components:Embeddable video uploader <iframe>.Admin-only moderation control panel.
Google Code Project:http://code.google.com/p/youtube-direct/
![Page 30: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/30.jpg)
YouTube Direct : Overview
Download the code and deploy to your own App Engine instance.
Demo at:http://ytd-demo.appspot.com/test.html
![Page 31: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/31.jpg)
YouTube Direct : Upload Interface
![Page 32: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/32.jpg)
YouTube Direct : Upload Interface
![Page 33: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/33.jpg)
YouTube Direct : Upload Interface
![Page 34: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/34.jpg)
YouTube Direct : Admin Interface
![Page 35: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/35.jpg)
YouTube Direct : Architecture
![Page 36: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/36.jpg)
YouTube Direct : Mobile
Mobile application for video upload Integrated with your YouTube Direct instance running on AppEngineExtensively tested on NexusOne, iPhone version in the works Google Code Project http://code.google.com/p/ytd-android/
![Page 37: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/37.jpg)
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 38: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/38.jpg)
Example : http://ureport.abc7news.com
![Page 39: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/39.jpg)
Conclusion
Is video application development hard ?
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 40: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/40.jpg)
Backup slides
![Page 41: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/41.jpg)
Playgrounds
OAuth Playgroundhttp://googlecodesamples.com/oauth_playground/
Chromeless Player http://code.google.com/apis/ajax/playground/?exp=youtube#chromeless_player
Player Demohttp://code.google.com/apis/youtube/youtube_player_demo.html
![Page 42: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/42.jpg)
Docs Links
Protocol Referencehttp://code.google.com/apis/youtube/2.0/reference.html
Developer Guidehttp://code.google.com/apis/youtube/2.0/developers_guide_protocol_audience.html
Player APIshttp://code.google.com/apis/youtube/getting_started.html#player_apis
Mobile Resourceshttp://code.google.com/apis/youtube/articles/youtube_mobileresources.html
![Page 43: Building Video Applications with YouTube APIs](https://reader034.vdocuments.site/reader034/viewer/2022042601/54b9e4a64a7959fb2c8b45a5/html5/thumbnails/43.jpg)
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]