Building Video Applications with YouTube APIs

  • 17,713 views
Uploaded 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 …

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.

More 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

Views

Total Views
17,713
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
128
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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/