• Like
Building Video Applications with YouTube APIs
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Building Video Applications with YouTube APIs


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 …

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.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Building Video Apps with YouTube APIs Silicon Valley CodeCamp Jarek Wilkiewicz twitter.com/wjarek 10/10/2010
  • 2. Agenda Intro Life of a video APIs Back-end (Google Data API) Front-end (Player) App Examples YouTube Direct YouTube Direct Mobile Q&A
  • 3. 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
  • 4. Life of a video Uploading Sharing Searching Playback Video : Evolution of Dance by Judson Laipply http://www.youtube.com/watch?v=dMH0bHeiRNg
  • 5. Life of a video : Uploading Via YouTube.com uploader Standard (POST) Advanced (Java) Mobile (mailto:xyz93a@m.youtube.com) Using the API Browser-based Direct Direct resumable (great for mobile) Metadata (category, keyword, description, location, etc.)
  • 6. Life of a video : Sharing Autoshare Embed Publish to activity feed
  • 7. Life of a video : Searching http://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/&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>
  • 8. Life of a video : Playback On YouTube.com On other sites Custom Player Embedded Player Chromeless Player On your mobile On other devices
  • 9. APIs
  • 10. APIs Google Data APIs Player APIs
  • 11. Google Data APIs Protocol REST-based ATOM syndication format (RFC 4287) ATOM publishing protocol (RFC 5023) support for XML-based ATOM (default), JSON, JSON-C, RSS Feeds Standard feeds (Top Rated, Most Viewed, ...) User's playlists, subscriptions, uploads feeds User's comments, profile, contacts feed YouTube applications interact with the feeds using the Google Data APIs
  • 12. Feed example : Top Rated http://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>
  • 13. 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); } }
  • 14. Other useful things one can do with the APIs Upload Search Rate a video (Like/Dislike) Comment Add a playlist Retrieve activity feed (SUP or PubSubHubbub) Retrieve Insight video statistics Call Kanye And more! If your application obtains OAuth/AuthSub authorization from a user, all of these can be done on user's behalf.
  • 15. Adding a playlist in PHP <?php require_once 'Zend/Loader.php'; // the Zend dir must be in your include_path Zend_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(); } ?>
  • 16. 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 = False query = gdata.youtube.service.YouTubeVideoQuery() query.vq = search_terms query.orderby = 'viewCount' feed = yt_service.YouTubeQuery(query) PrintVideoFeed(feed)
  • 17. 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);
  • 18. Player APIs Control the Player from your Web front-end URI parameters JavaScript API ActionScript API (AS3, AS2 deprecated)
  • 19. 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>
  • 20. 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 JavaScript var params = { allowScriptAccess: "always" }; // The element id of the Flash embed var 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);
  • 21. 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()); } }
  • 22. 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); }
  • 23. What about mobile ? Video: David After Dentist by booba1234 http://www.youtube.com/watch?v=txqiwrbYGrs
  • 24. Mobile : Recording Java Intent i = new Intent(); i.setAction(MediaStore.VIDEO_CAPTURE); startActivityForResult(i, CAPTURE_RETURN); Objective-C IImagePickerController *imagePicker = [[[UIImagePickerController alloc] init] autorelease]; imagePicker.delegate = self; imagePicker.sourceType = UIImagePickerControllerSourceTypeCamera; imagePicker.mediaTypes = [NSArray arrayWithObject:(NSString *)kUTTypeMovie]; [self presentModalViewController:imagePicker animated:YES];
  • 25. Mobile : Uploading ACTION_SEND intent Use Google Data protocol to upload Libraries available for leading mobile platforms; you can use direct REST/HTTP on others
  • 26. Mobile : Sharing, Searching, Playback Sharing, Searching Java Google Data Library Objective-C Google Data Library Playback ACTION_VIEW intent openURL method of the UIApplication
  • 27. One last thing ... Read the Terms of Service Monetization Guide Branding Guide [1] [1] Photo by sub_lime79 / Misty http://www.flickr.com/photos/mistybushell/2303555607/
  • 28. App Examples
  • 29. 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/
  • 30. YouTube Direct : Overview Download the code and deploy to your own App Engine instance. Demo at: http://ytd-demo.appspot.com/test.html
  • 31. YouTube Direct : Upload Interface
  • 32. YouTube Direct : Upload Interface
  • 33. YouTube Direct : Upload Interface
  • 34. YouTube Direct : Admin Interface
  • 35. YouTube Direct : Architecture
  • 36. YouTube Direct : Mobile Mobile application for video upload Integrated with your YouTube Direct instance running on AppEngine Extensively tested on NexusOne, iPhone version in the works Google Code Project http://code.google.com/p/ytd-android/
  • 37. YouTube Direct : Mobile Easy authentication with AccountMananger Submission idea sync (JSON) Notification upon new assignments Video recording and upload to a specific submission idea Upload of a video selected from the gallery Geolocation tagging Massage and psychic readings
  • 38. Example : http://ureport.abc7news.com
  • 39. 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)
  • 40. Backup slides
  • 41. Playgrounds OAuth Playground http://googlecodesamples.com/oauth_playground/ Chromeless Player http://code.google.com/apis/ajax/playground/? exp=youtube#chromeless_player Player Demo http://code.google.com/apis/youtube/youtube_player_demo.html
  • 42. Docs Links Protocol Reference http://code.google.com/apis/youtube/2.0/reference.html Developer Guide http://code.google.com/apis/youtube/2.0/developers_guide_protocol_audience.html Player APIs http://code.google.com/apis/youtube/getting_started.html#player_apis Mobile Resources http://code.google.com/apis/youtube/articles/youtube_mobileresources.html
  • 43. ToS [1] YouTube API Terms of Service http://code.google.com/apis/youtube/terms.html Monetization Guide http://code.google.com/apis/youtube/creating_monetizable_applications.html Branding Guide http://code.google.com/apis/youtube/branding.html [1] Photo by sub_lime79 / Misty http://www.flickr.com/photos/mistybushell/2303555607/