Date post: | 17-Jan-2015 |
Category: |
Technology |
Upload: | jarek-wilkiewicz |
View: | 17,802 times |
Download: | 2 times |
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]