Building Video Applications with YouTube APIs
43
Building Video Apps with YouTube APIs Silicon Valley CodeCamp Jarek Wilkiewicz twitter.com/wjarek 10/10/2010
-
Upload
jarek-wilkiewicz -
Category
Technology
-
view
17.807 -
download
2
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 of Building Video Applications with YouTube APIs
Building Video Appswith YouTube APIs
Silicon Valley CodeCampJarek Wilkiewicz
twitter.com/wjarek10/10/2010
IntroLife of a videoAPIs
Back-end (Google Data API)Front-end (Player)
App ExamplesYouTube DirectYouTube Direct Mobile
Q&A
Agenda
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
*
UploadingSharingSearchingPlayback
Life of a video
Video : Evolution of Dance by Judson Laipplyhttp://www.youtube.com/watch?v=dMH0bHeiRNg
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
Life of a video : Sharing
AutoshareEmbedPublish to activity feed
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>
Life of a video : Playback
On YouTube.comOn other sites
Custom PlayerEmbedded PlayerChromeless Player
On your mobile
On other devices
APIs
APIs
Google Data APIs Player APIs
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
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>
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
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.
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();}?>
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)
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-endURI parametersJavaScript APIActionScript 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 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);
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 booba1234http://www.youtube.com/watch?v=txqiwrbYGrs
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];
Mobile : Uploading
ACTION_SEND intent Use Google Data protocol to uploadLibraries available for leading mobile platforms; you can use direct REST/HTTP on others
Mobile : Sharing, Searching, Playback
Sharing, SearchingJava Google Data Library Objective-C Google Data Library
PlaybackACTION_VIEW intent openURL method of the UIApplication
One last thing ...
Read the Terms of ServiceMonetization GuideBranding Guide
[1] Photo by sub_lime79 / Mistyhttp://www.flickr.com/photos/mistybushell/2303555607/
[1]
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 : Upload Interface
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 AppEngineExtensively tested on NexusOne, iPhone version in the works Google Code Project http://code.google.com/p/ytd-android/
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
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 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
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
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]
