Building Video Applications with YouTube APIs


Published on

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
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building Video Applications with YouTube APIs

  1. 1. Building Video Apps with YouTube APIs Silicon Valley CodeCamp Jarek Wilkiewicz 10/10/2010
  2. 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. 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. 4. Life of a video Uploading Sharing Searching Playback Video : Evolution of Dance by Judson Laipply
  5. 5. Life of a video : Uploading Via uploader Standard (POST) Advanced (Java) Mobile ( Using the API Browser-based Direct Direct resumable (great for mobile) Metadata (category, keyword, description, location, etc.)
  6. 6. Life of a video : Sharing Autoshare Embed Publish to activity feed
  7. 7. Life of a video : Searching q=football+-soccer &orderby=published &start-index=1 &max-results=10 &v=2 <?xml version='1.0' encoding='UTF-8'?> <feed xmlns='' xmlns:openSearch='' […] <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='' term=''/> […] </entry> [...] </feed>
  8. 8. Life of a video : Playback On On other sites Custom Player Embedded Player Chromeless Player On your mobile On other devices
  9. 9. APIs
  10. 10. APIs Google Data APIs Player APIs
  11. 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. 12. Feed example : Top Rated <?xml version='1.0' encoding='UTF-8'?> <feed xmlns='' […] > <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='' type='application/x-shockwave-flash' medium='video' [...] duration='215' yt:format='5'/> <media:thumbnail url='' height='97' width='130' time='00:00:03.500'/> </media:group> </entry> <entry> […] </entry> </feed>
  13. 13. Feed access example in Java import; import; import; 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. 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. 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 = ''; try { $yt->insertEntry($newPlaylist, $postLocation); } catch (Zend_Gdata_App_Exception $e) { echo $e->getMessage(); } ?>
  16. 16. Performing video search in Python import def PrintVideoFeed(feed): for entry in feed.entry: PrintEntryDetails(entry) yt_service = yt_service.ssl = False query = query.vq = search_terms query.orderby = 'viewCount' feed = yt_service.YouTubeQuery(query) PrintVideoFeed(feed)
  17. 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("", "video/quicktime"); YouTubeEntry createdEntry = service.Upload(newEntry);
  18. 18. Player APIs Control the Player from your Web front-end URI parameters JavaScript API ActionScript API (AS3, AS2 deprecated)
  19. 19. Player Parameters <object width="425" height="344"> <param name="movie" value=""</param> <param name="allowFullScreen" value="true"></param> <param name="allowScriptAccess" value="always"></param> <embed src="" 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." frameborder="0"> </iframe>
  20. 20. Player JavaScript API : load a video <script src="" 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 ( swfobject.embedSWF("" + videoID + "&enablejsapi=1&playerapiid=player1", "videoDiv", "480", "295", "8", null, null, params, atts);
  21. 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. 22. Player API : ActionScript private static const PLAYER_URL:String = ""; […] 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. 23. What about mobile ? Video: David After Dentist by booba1234
  24. 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. 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. 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. 27. One last thing ... Read the Terms of Service Monetization Guide Branding Guide [1] [1] Photo by sub_lime79 / Misty
  28. 28. App Examples
  29. 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:
  30. 30. YouTube Direct : Overview Download the code and deploy to your own App Engine instance. Demo at:
  31. 31. YouTube Direct : Upload Interface
  32. 32. YouTube Direct : Upload Interface
  33. 33. YouTube Direct : Upload Interface
  34. 34. YouTube Direct : Admin Interface
  35. 35. YouTube Direct : Architecture
  36. 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
  37. 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. 38. Example :
  39. 39. Conclusion Is video application development hard ? Get the YouTube API developer key and start hacking! (docs) (blog) (forum) (me)
  40. 40. Backup slides
  41. 41. Playgrounds OAuth Playground Chromeless Player exp=youtube#chromeless_player Player Demo
  42. 42. Docs Links Protocol Reference Developer Guide Player APIs Mobile Resources
  43. 43. ToS [1] YouTube API Terms of Service Monetization Guide Branding Guide [1] Photo by sub_lime79 / Misty
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.