0
Building Video Apps
 with YouTube APIs
      Silicon Valley CodeCamp
                Jarek Wilkiewicz
              twitte...
Agenda
  Intro
  Life of a video
  APIs
     Back-end (Google Data API)
     Front-end (Player)
  App Examples
     YouTub...
Quiz   *




Number of YouTube views per day ?
<your answer here>

Number of mobile YouTube views per day?
<your answer he...
Life of a video

      Uploading
      Sharing
      Searching
      Playback




Video : Evolution of Dance by Judson Lai...
Life of a video : Uploading
  Via YouTube.com uploader
      Standard (POST)
    Advanced (Java)
    Mobile (mailto:xyz93a...
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
   &sta...
Life of a video : Playback

  On YouTube.com
  On other sites
    Custom Player
    Embedded Player
    Chromeless Player
...
APIs
APIs

       Google Data APIs   Player APIs
Google Data APIs

  Protocol
     REST-based
     ATOM syndication format (RFC 4287)
     ATOM publishing protocol (RFC 50...
Feed example : Top Rated
http://gdata.youtube.com/feeds/api/standardfeeds/top_rated

<?xml version='1.0' encoding='UTF-8'?...
Feed access example in Java
import com.google.gdata.client.youtube.YouTubeService;
import com.google.gdata.data.youtube.Vi...
Other useful things one can do with the APIs


   Upload
   Search
   Rate a video (Like/Dislike)
   Comment
   Add a play...
Adding a playlist in PHP

<?php
require_once 'Zend/Loader.php'; // the Zend dir must be in your include_path
Zend_Loader::...
Performing video search in Python

import gdata.youtube.service

def PrintVideoFeed(feed):
 for entry in feed.entry:
  Pri...
Direct upload in C#

using Google.GData.Client;
using Google.GData.Extensions;
using Google.GData.YouTube;
using Google.GD...
Player APIs


  Control the Player from your Web front-end
  URI parameters
  JavaScript API
  ActionScript API (AS3, AS2 ...
Player Parameters
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1"<...
Player JavaScript API : load a video

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script t...
Player JavaScript API : Events

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("ytPlayer")...
Player API : ActionScript

private static const PLAYER_URL:String =
     "http://www.youtube.com/apiplayer?version=3";
[…]...
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, C...
Mobile : Uploading


  ACTION_SEND intent
  Use Google Data protocol to
  upload
  Libraries available for leading
  mobil...
Mobile : Sharing, Searching, Playback



  Sharing, Searching
     Java Google Data Library
     Objective-C Google Data L...
One last thing ...

       Read the Terms of
       Service
       Monetization Guide
       Branding Guide




          ...
App Examples
YouTube Direct : Overview

YouTube Direct (YTD) is an open source video
submission platform that is built on top of the Yo...
YouTube Direct : Overview

Download the code and deploy to your own
App Engine instance.

Demo at:
http://ytd-demo.appspot...
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 o...
YouTube Direct : Mobile
 Easy authentication with
 AccountMananger
 Submission idea sync (JSON)
 Notification upon new
 as...
Example : http://ureport.abc7news.com
Conclusion

Is video application development hard ?

Get the YouTube API developer key and start hacking!
http://code.goog...
Backup slides
Playgrounds


OAuth Playground
http://googlecodesamples.com/oauth_playground/

Chromeless Player
http://code.google.com/ap...
Docs Links
    Protocol Reference
http://code.google.com/apis/youtube/2.0/reference.html
    Developer Guide
http://code.g...
ToS
                                                                             [1]




YouTube API Terms of Service
http...
Upcoming SlideShare
Loading in...5
×

Building Video Applications with YouTube APIs

18,170

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

No Downloads
Views
Total Views
18,170
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
131
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Building Video Applications with YouTube APIs"

  1. 1. Building Video Apps with YouTube APIs Silicon Valley CodeCamp Jarek Wilkiewicz twitter.com/wjarek 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 http://www.youtube.com/watch?v=dMH0bHeiRNg
  5. 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. 6. Life of a video : Sharing Autoshare Embed Publish to activity feed
  7. 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. 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. 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 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. 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. 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 = 'http://gdata.youtube.com/feeds/api/users/default/playlists'; try { $yt->insertEntry($newPlaylist, $postLocation); } catch (Zend_Gdata_App_Exception $e) { echo $e->getMessage(); } ?>
  16. 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. 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. 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="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. 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. 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 = "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. 23. What about mobile ? Video: David After Dentist by booba1234 http://www.youtube.com/watch?v=txqiwrbYGrs
  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 http://www.flickr.com/photos/mistybushell/2303555607/
  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: http://code.google.com/p/youtube-direct/
  30. 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. 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 http://code.google.com/p/ytd-android/
  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 : http://ureport.abc7news.com
  39. 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. 40. Backup slides
  41. 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. 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. 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/
  1. A particular slide catching your eye?

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

×