Building Video Applications with YouTube APIs

Building Video Apps with YouTube APIs Silicon Valley CodeCamp Jarek Wilkiewicz twitter.com/wjarek 10/10/2010

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

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

Life of a video Uploading Sharing Searching Playback Video : Evolution of Dance by Judson Laipply http://www.youtube.com/watch?v=dMH0bHeiRNg

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.)

Life of a video : Sharing Autoshare Embed Publish to activity feed

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

Life of a video : Playback On YouTube.com On other sites Custom Player Embedded Player Chromeless Player On your mobile On other devices

APIs Google Data APIs Player APIs

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

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

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); } }

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.

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(); } ?>

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)

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);

Player APIs Control the Player from your Web front-end URI parameters JavaScript API ActionScript API (AS3, AS2 deprecated)

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>

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);

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()); } }

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); }

What about mobile ? Video: David After Dentist by booba1234 http://www.youtube.com/watch?v=txqiwrbYGrs

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];

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

Mobile : Sharing, Searching, Playback Sharing, Searching Java Google Data Library Objective-C Google Data Library Playback ACTION_VIEW intent openURL method of the UIApplication

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/

App Examples

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/

YouTube Direct : Overview Download the code and deploy to your own App Engine instance. Demo at: http://ytd-demo.appspot.com/test.html

YouTube Direct : Upload Interface

YouTube Direct : Admin Interface

YouTube Direct : Architecture

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/

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

Example : http://ureport.abc7news.com

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)

Backup slides

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

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

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/

http://jarek.members.sonic.net	33
http://www.linkedin.com	15

Building Video Applications with YouTube APIs

by Jarek Wilkiewicz

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 48

Statistics

Building Video Applications with YouTube APIs Presentation Transcript