YouTube for Developers


Published on

Presentation about YouTube and its accompanying APIs at the National Association of Government Webmasters conference in Cincinnati, OH on September 15, 2011.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

YouTube for Developers

  1. 1. <ul><li>Brooks Bennett, City of Round Rock, TX </li></ul>YouTube for Developers Developers
  2. 2. Necessary YouTube Caveat <ul><li>YouTube has the power to make time melt away. It is possible to watch years of: </li></ul><ul><ul><li>Kittens </li></ul></ul><ul><ul><li>Slam dunks </li></ul></ul><ul><ul><li>Car crashes </li></ul></ul><ul><ul><li>Kids dancing </li></ul></ul>
  3. 3. What we will cover <ul><li>Uploading to YouTube </li></ul><ul><ul><li>Proper moderation settings </li></ul></ul><ul><li>Video embedding basics </li></ul><ul><ul><li>Custom video embed parameters </li></ul></ul><ul><li>YouTube Player API </li></ul><ul><li>YouTube Data API </li></ul>
  4. 4. Why YouTube <ul><li>World’s largest video sharing community </li></ul><ul><li>Video quality has greatly improved over past two years </li></ul><ul><li>Actively adding new features </li></ul><ul><ul><li>HTML5 </li></ul></ul><ul><ul><li>Closed captions </li></ul></ul><ul><li>Robust APIs </li></ul>
  5. 5. YouTube for Government <ul><li>YouTube has a government partner program, but it takes a LONG time to get accepted and there is no feedback during the process </li></ul><ul><li>Removes any video duration limitations </li></ul><ul><li>Gives you a little bit more control over the branding of the page </li></ul>
  6. 6. YouTube for Government <ul><li>The name of your government, government department, or agency </li></ul><ul><li>Your .gov website URL </li></ul><ul><li>The account name you've registered on YouTube (i.e., your YouTube username) </li></ul><ul><li>The email address you are using to manage the account </li></ul>
  7. 7. YouTube for Government <ul><li>Any other information about your plans to launch the channel, and what types of content you plan to post </li></ul><ul><li>Send this information to: [email_address] </li></ul>
  8. 8. Uploading to YouTube <ul><li> </li></ul>
  9. 9. Video embedding
  10. 10. Video embedding <ul><li>Uncheck “Show suggested videos when video finishes,” unless you are comfortable with random suggested videos showing up </li></ul><ul><li>Check HTTPS if you are embedding on a secure site to avoid “mixed content” warnings </li></ul>
  11. 11. Video embedding <ul><li>Check “Enable privacy-enhanced mode” to disallow YouTube from setting a cookie when the player is loaded </li></ul><ul><li>Cookie will only be set when user clicks to play the video and that information will not be personally identifiable </li></ul>
  12. 12. Video embedding <ul><li>Uncheck “Use old embed code” </li></ul><ul><ul><li><iFrame> embed detects if device can use HTML5 video </li></ul></ul><ul><ul><ul><li>You can detect what your browser supports at: </li></ul></ul></ul><ul><ul><li>Only use <Object> if the site you are using won’t allow iFrame </li></ul></ul>
  13. 13. Video embedding <ul><li>Select predefined size </li></ul><ul><li>Or set a custom height or width </li></ul><ul><ul><li>YouTube will automatically constrain proportions, which is a nice feature </li></ul></ul><ul><ul><li>Nice to know size of content area where you are embedding and size accordingly </li></ul></ul>
  14. 14. Video embedding <ul><ul><li>What you might be thinking: </li></ul></ul><ul><ul><li>“ Give me more control...” </li></ul></ul>
  15. 15. Video embedding <ul><ul><li><iframe width=&quot;420&quot; height=&quot;345&quot; src=&quot; </li></ul></ul><ul><ul><li>&controls=1&enablejsapi=1&fs=1 </li></ul></ul><ul><ul><li>&iv_load_policy=1&loop=0&modestbranding=1&playerapiid=test&playlist=QtQKgNWH7IU,AuwxGuLSgUo&rel=1&showinfo=0&theme=light&color=red&start=10&quot; frameborder=&quot;0&quot; allowfullscreen></iframe> </li></ul></ul>
  16. 16. Embed parameters <ul><li>autohide (0,1, 2 )- 0: don’t hide controls; 1:progress bar and controls fade out; 2: progress bar fades out </li></ul><ul><li>autoplay ( 0 ,1)- Should video play on load </li></ul><ul><li>cc_load_policy(1, user pref )- Will force closed captions to load </li></ul><ul><li>color ( red ,white)- Color of progress bar </li></ul>
  17. 17. Embed parameters <ul><li>controls (0, 1 )- Show player controls </li></ul><ul><li>disablekb ( 0 ,1)- Disable keyboard controls </li></ul><ul><li>enablejsapi ( 0 ,1)- Enable JavaScript API </li></ul><ul><li>fs (0, 1 )- Enables fullscreen button </li></ul><ul><li>iv_load_policy ( 1 ,3)- 1:Show video annotations by default; 3: Don’t show video annotations </li></ul>
  18. 18. Embed parameters <ul><li>loop ( 0 ,1)- Play single video over and over or play playlist over and over </li></ul><ul><li>modestbranding ( 0 ,1)- Hide YouTube logo </li></ul><ul><li>origin - Supply your domain for extra security measure when using JavaScript API </li></ul><ul><li>playerapiid - String used for control via JavaScript API </li></ul>
  19. 19. Embed parameters <ul><li>playlist - Comma separated list of YouTube IDs </li></ul><ul><li>rel (0, 1 )- Show related videos </li></ul><ul><li>showinfo (0, 1 )- Show title text on video before playing </li></ul><ul><li>start - Value in seconds to start playing video </li></ul><ul><li>theme ( dark ,light) - Theme color </li></ul>
  20. 20. Embed parameters <ul><li>HUH? </li></ul><ul><li>Let's tinker a bit... </li></ul>
  21. 21. Google APIs <ul><li>As we all know, Google loves APIs (and so do we) </li></ul><ul><li>All Google APIs are listed at: </li></ul>
  22. 22. Player APIs <ul><li>Give you control over YouTube video playback on your website </li></ul><ul><ul><li>Configure basic settings </li></ul></ul><ul><ul><li>Drive the player interface </li></ul></ul><ul><ul><li>Build your own player controls </li></ul></ul>
  23. 23. Chromeless vs. Embedded player <ul><li>Chromeless </li></ul><ul><ul><li> enablejsapi=1 &version=3 </li></ul></ul><ul><li>Embedded </li></ul><ul><ul><li> enablejsapi=1 </li></ul></ul>Note: enablejsapi is necessary to control the players via JavaScript
  24. 24. Player APIs <ul><li>Player API demo: </li></ul>
  25. 25. Player APIs <ul><li>Player API documentation: </li></ul>
  26. 26. Player APIs <ul><li>Shall we make some junk? </li></ul><ul><li>Yes, we shall </li></ul>
  27. 27. Player APIs <ul><li>Garbage into an idea... </li></ul><ul><ul><li>We could take long form videos, like Board and Commission meetings, and add links to jump to each agenda item. This would take some effort, but you suddenly have a “poor man’s” video playback system for meetings. Cost: $0 . </li></ul></ul>
  28. 28. Data API <ul><li>Lets you incorporate YouTube functionality into your own application or website. You can perform searches, upload videos, create playlists, and more. </li></ul>
  29. 29. Data API <ul><li>Data API Overview </li></ul>
  30. 30. Data API <ul><li>Google recommends you use JSON-C instead of JSON for working with the Data API via JavaScript </li></ul><ul><ul><li>More compact, logical responses </li></ul></ul><ul><ul><li>Doesn’t mimic XML tags and attributes </li></ul></ul><ul><ul><li>YouTube says JSON will be deprecated, so do it for future proofing </li></ul></ul>
  31. 31. Data API <ul><li>Important Query Parameters </li></ul><ul><ul><li>alt (atom, rss, json, json-in-script, jsonc) </li></ul></ul><ul><ul><li>callback (API wraps response in a call to the function you name) </li></ul></ul><ul><ul><li>start-index (Number of the first result to return) </li></ul></ul><ul><ul><li>max-results (Maximum number results) </li></ul></ul><ul><ul><li>v (Version of the API, current is 2) </li></ul></ul>
  32. 32. Example Request <ul><ul><li> </li></ul></ul><ul><ul><li>JSONC interactive demo </li></ul></ul>
  33. 33. Partial Response (experimental) <ul><li>API returns lots of stuff. Partial response only sends what you want using an XPATH-like syntax </li></ul><ul><li>?fields=entry(title,link[@rel='self' or @rel='edit'],media:group(media:thumbnail)) </li></ul>Note: jsonc is not yet enabled for returning partial responses
  34. 34. Mumbo Jumbo? <ul><li>So what do you do with this stuff? </li></ul>
  35. 35. Ways Round Rock puts it together <ul><li>Video box on city homepage </li></ul><ul><li>City Focus video player </li></ul><ul><li>City of Round Rock video widget </li></ul>
  36. 36. Thanks! <ul><li>Brooks Bennett </li></ul><ul><li>City of Round Rock, TX </li></ul><ul><li>[email_address] </li></ul><ul><li>@brooksbennett </li></ul><ul><li>Circle me on Google+ </li></ul>