CTO & Co-founder@ste entchrste en@23company.com
Lead Developer@nickbruunnick@23company.com
The developer         AGENDA                      ‣  The Overview ntroduction to the     Overview and demo of 23 Video    ...
Powering 200+ customers
Through a network of 100+ partners
demo!
It’s easy!‣  Full control over design‣  Upload anything, play anywhere‣  Plays nice with the social web‣  No installation ...
One price.$675 / month         including 1TB tra   c & all software updates
Some examples of   ‣  Brand channels                     Novozymes | http:/www./novozymes.tvhow people are     ‣  Communit...
ROADMAPSections & Subtitles‣  Subdivide video clips into sections or chapters, with automatic search  integration.‣  Inter...
ROADMAPGlobal Delivery Platform‣  The core challenge of video is bandwidth and quick delivery of bytes.‣  Built-in content...
ROADMAPOpen Upload 2.0‣  Custom variables in upload forms‣  Embeddable open upload for easy integration with existing sites
ROADMAPAnalytics 2.0‣  Current analytics holds about a million data points, per day.  SQL and traditional RDBMS systems be...
THE DESIGN DNAThe Grid‣ The shape of a 23 Video site
THE DESIGN DNABlock Driven Layout‣ The basic piece of a 23 Video site: “the layout block”‣ A generic container for informa...
THE DESIGN DNAThe E ect‣ Same building blocks – completely di erent looks
CUSTOMIZINGThe Technologies‣ Standard web technologies   ‣ CSS   ‣ HTML   ‣ JavaScript‣ Everything is editable from the ba...
CUSTOMIZINGThe Layout in HTML
CUSTOMIZINGThe Block in HTML<div id="block<unique block ID>"class="layout-block <block-specificclass> [layout-block-empty]...
Let’s have a crack at it!
GOING ADVANCEDCustomizable Stylesheets‣ Stylesheets can be made user-customizable‣ Perfect for customers requiring multipl...
GOING ADVANCEDThe Syntax for Customization%background-color%{  name: Site background color;  type: color;  default: #fafaf...
GOING ADVANCEDTricks with Custom Colors%background-color%{  ..}body{  background-color: %background-color%;}#header{  back...
ROADMAPCustomization at the Next Level‣ Fully editable templates based on the Liquid Markup Language‣ Easily customizable ...
Setting up playersand embedding‣  Admins can create a many di erent player styles and configs as needed‣  A configuration ca...
The anatomy of an embed codeSIMPLE FLASH VERSION <embed width="580" height="435" src="http://videos.example.com/v.swf"    ...
f you embed          On devices such as iPhone, iPad and most                      mobiles, Flash isnt available to handle...
The anatomy of an embed codeWHAT TO SHOW IN THE PLAYER? flashvars="	   photo_id=12345	                          // Which v...
Our own players are all opensourced and ready to be hacked$ git clone git://github.com/23/videoplayer.git VideoPlayer	Init...
But I want to build my own player…So far, weve just been changing the set-up of the 23 Video standard players, but:   Cust...
Easy to change   LETS PLAY AROUND…                 ‣  Remove a few controlsa few minor                 ‣  Kill the rounded...
… and still enough   You dont have to use the 23 Video player if you                     dont want to – since the player i...
ome examples of custom
When you restyle the open source player, makesure you allow yourself to be kept up-to-date$ git fetch origin	$ git merge m...
Control the Flash player from JavaScriptSTART PLAYING ON LOAD function getFlexApp(appName) {	      return(document[appName...
Control the Flash player from JavaScriptJUMP TO A SPECIFIC TIME IN THE PLAYER function getFlexApp(appName) {	      return(...
Control the Flash player from JavaScriptLIVE EXAMPLEHow to retrieve titles, descriptionsthumbnails and more for the curren...
ROADMAPFlash Builder 4‣  Weve o   cially been on Flex 3 until now.‣  This week were switching to Flash Builder 4 as the su...
COMMUNICATIONTalking to a 23 Video Site‣ Simple RESTful HTTP communication‣ Methods available under http://domain.tld/api/...
AUTHENTICATIONGetting Permission‣ Three ways to authenticate   ‣ OAuth 1.0a   ‣ API tokens   ‣ Anonymous access‣ Methods a...
AUTHENTICATIONOAuth 1.0aauthentication‣ Secure protocol   ‣ No password exchanges   ‣ Relies on SHA1 signature signing‣ Lo...
AUTHENTICATIONAPI Tokens‣ Designed for giving third parties specific access‣ Requires a certain access level to obtain‣ No ...
DATA MODELThe Grand Picture            Video                        Site  Section           Subtitle   Session           U...
USING THE APICalling an API Method‣ Getting the 20 latest videos with the tag “23video” in JSON    http://sample.23video.c...
USING THE APISession Signing‣ Perfect way to control access to content                          Get token                M...
USING THE APIEnabling Uploads‣ Allow people to upload videos, without being administrators                     Get token f...
USING THE APIPingbacks‣ Having 23 Video tell you, when something changes on a site‣ Currently only notifies of changes in v...
ROADMAPO cial CMS Implementations‣ We’re constantly working on more implementations for popular CMS’‣ Umbraco 5.0 Universa...
ROADMAPBetter, Faster, Stronger‣ Pingbacks as a central element in API usage‣ Most new functionality will be exposed throu...
‣  O    cial librariesLibraries,         23 maintains an o   cial .NET implementation writtsamples and        in C# 3.5mpl...
‣  Design guideResources for        Details on how to set up the design on a 23 Video sgetting more         how to design ...
NEW STREAMFollow @23developeras a source of news,examples, oddities.(Will probably also work great forasking quick questio...
Or just ask us…   @STEFFENTCHR   STEFFENTCHR   STEFFEN@23COMPANY.COM   @NICKBRUUN     NICK_BRUUN    NICK@23COMPANY.COM
Developer Training for 23 Video
Developer Training for 23 Video
Developer Training for 23 Video
Developer Training for 23 Video
Developer Training for 23 Video
Developer Training for 23 Video
Developer Training for 23 Video
Developer Training for 23 Video
Developer Training for 23 Video
Developer Training for 23 Video
Developer Training for 23 Video
Developer Training for 23 Video
Upcoming SlideShare
Loading in …5
×

Developer Training for 23 Video

1,236 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,236
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Developer Training for 23 Video

  1. 1. CTO & Co-founder@ste entchrste en@23company.com
  2. 2. Lead Developer@nickbruunnick@23company.com
  3. 3. The developer AGENDA ‣  The Overview ntroduction to the Overview and demo of 23 Video ‣  The Designproduct– or Customizing every detail of a videosite ‣  The Playermerely 23 Video Using and customizing video players ‣  The APIfor geeks… Mash up, extend and integrate the product ‣  The Community Getting more info and keeping updated (Well do the nitty-gritty details and end o each part with plenty of examples and an overview of our roadmap.)
  4. 4. Powering 200+ customers
  5. 5. Through a network of 100+ partners
  6. 6. demo!
  7. 7. It’s easy!‣  Full control over design‣  Upload anything, play anywhere‣  Plays nice with the social web‣  No installation and lock-in‣  Hosted as service with full support
  8. 8. One price.$675 / month including 1TB tra c & all software updates
  9. 9. Some examples of ‣  Brand channels Novozymes | http:/www./novozymes.tvhow people are ‣  Community Hjemmeværnet | http://film.hjv.dkusing 23 Video ‣  Ecommerce Unisport | http://webtv.unisport.dk ‣  Ecommerce Unisport | http://webtv.unisport.dk ‣  Archive Byen I Byen| http://byenibyen.frederiksberg.dk ‣  Internal sharing (No links, unfortunately) ‣  Events TedX | http://video.tedxcopenhagen.dk ‣  Media Bilmagasinet | http://www.bilmagasinettv.dk ‣  Campaigns Carlsberg Sport | http://tv.carlsbergsport.dk
  10. 10. ROADMAPSections & Subtitles‣  Subdivide video clips into sections or chapters, with automatic search integration.‣  Internationalize content by adding captions and subtitles.‣  Also a beginning requirement in public sector project to ensure accessibility.‣  Support for current subtitle formats, but build for html5 around WebSRT
  11. 11. ROADMAPGlobal Delivery Platform‣  The core challenge of video is bandwidth and quick delivery of bytes.‣  Built-in content delivery network, but not just for video.‣  Handles all the asset of a videosite including the custom design elements and resources.‣  Currently in 5 locations around the world, covering 3 continents.‣  Expanding with more nodes.
  12. 12. ROADMAPOpen Upload 2.0‣  Custom variables in upload forms‣  Embeddable open upload for easy integration with existing sites
  13. 13. ROADMAPAnalytics 2.0‣  Current analytics holds about a million data points, per day. SQL and traditional RDBMS systems become a bottleneck.‣  Building next version adding in new variables such as user sessions, geography, screen size, content source and player events.‣  Dedicated service with scalable routines to handle the data.‣  On Air: Live data view as reporting immediately when visitors are playing your clips.
  14. 14. THE DESIGN DNAThe Grid‣ The shape of a 23 Video site
  15. 15. THE DESIGN DNABlock Driven Layout‣ The basic piece of a 23 Video site: “the layout block”‣ A generic container for information‣ Positioned anywhere within the layout grid‣ A wide variety of blocks availableAbout the site Channel list Comments formContextual video player Download videos FooterHTML Block Import HTML from URL Link to loginLinks to pages List of comments MenuName and logo New videos Open uploadPlay list Popular videos Rate objectSearch box Sections ShareSubscribe Tag cloud UsersVideo overview Video thumbnails Web analytics
  16. 16. THE DESIGN DNAThe E ect‣ Same building blocks – completely di erent looks
  17. 17. CUSTOMIZINGThe Technologies‣ Standard web technologies ‣ CSS ‣ HTML ‣ JavaScript‣ Everything is editable from the backend‣ All content is hosted by 23
  18. 18. CUSTOMIZINGThe Layout in HTML
  19. 19. CUSTOMIZINGThe Block in HTML<div id="block<unique block ID>"class="layout-block <block-specificclass> [layout-block-empty]">..</div>
  20. 20. Let’s have a crack at it!
  21. 21. GOING ADVANCEDCustomizable Stylesheets‣ Stylesheets can be made user-customizable‣ Perfect for customers requiring multiple sites with same layout‣ Let users pick and choose specific data types ‣ Colors ‣ Graphics ‣ Fonts ‣ Text ‣ A custom value (justification, inset etc.)
  22. 22. GOING ADVANCEDThe Syntax for Customization%background-color%{ name: Site background color; type: color; default: #fafafa;}body{ background-color: %background-color%;}
  23. 23. GOING ADVANCEDTricks with Custom Colors%background-color%{ ..}body{ background-color: %background-color%;}#header{ background-color: %background-color+15%;}
  24. 24. ROADMAPCustomization at the Next Level‣ Fully editable templates based on the Liquid Markup Language‣ Easily customizable thumbnails‣ Fully customizable mobile site – the same way you work on primary sites
  25. 25. Setting up playersand embedding‣  Admins can create a many di erent player styles and configs as needed‣  A configuration can both change the SWF file behind the player and the settings for displaying‣  One player is default and can be changed at any time. This player is used for the video site.‣  Other player configs can be use by admin from the backend.‣  Configs are loaded dynamically, so embed codes wont change when a configuration does
  26. 26. The anatomy of an embed codeSIMPLE FLASH VERSION <embed width="580" height="435" src="http://videos.example.com/v.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="photo_id=12345"/> NOT AS PRETTY JAVASCRIPT VERSION – BUT HANDLES FALLBACK TO HTML5 WHEN FLASH ISNT AVAILABLE <script src="http://videos.example.com/resources/um/script/swfobject/swfobject.js"></script> <div id="player" class="embedded-video"> <div class="no-flash"> <iframe src="http://videos.example.com/v.html?photo_id=103770" width="580" height="435" frameborder=0 border=0 scrolling=no></iframe> </div> </div> <script>swfobject.embedSWF("http://videos.example.com/v.swf", "player", "580", "435", "9.0.0", "/resources/um/script/swfobject/expressInstall.swf", {"photo_id": "103770"}, {allowscriptaccess:always, allowfullscreen:true, wmode:transparent}, {id:player, name:player});</script>
  27. 27. f you embed On devices such as iPhone, iPad and most mobiles, Flash isnt available to handle the video playback. Here, we fall backcorrectly, html5 is automatically to html5.supported out of Currently, well be using the browsers standar player design for the video; but this is changingthe box – With the transition of styling to Liquid and ncluding on control of all html, we want to use the same templating model for customizing the html5mobile devices. player. Cross-browser support mixing WebM and H. 264 files: Safari 5, Chrome, Firefox 4, Opera 10 Internet Explorer 9.
  28. 28. The anatomy of an embed codeWHAT TO SHOW IN THE PLAYER? flashvars=" photo_id=12345 // Which video should be played? &token=abcd // If the video is unpublished, a secret token is needed &album_id=67890 // Which channel to include videos from? &tag=demodemo // Which tag to include video from? "/> HOW TO SHOW THE PLAYER? (explicitly overrides the config for the player) flashvars=" backgroundColor=yellow // Make sure the player background is yellow &showTray=0 // Dont show the player controls in the tray &autoPlay=1 // Start playing immediately on load &start=120 // And start the video 2 minutes in "/> * http://www.23developer.com/design/player-embed has a full list of options.
  29. 29. Our own players are all opensourced and ready to be hacked$ git clone git://github.com/23/videoplayer.git VideoPlayer Initialized empty Git repository in VideoPlayer/.git/ $ cd VideoPlayer $ git branch MyPlayer $ git checkout MyPlayer Switched to branch "MyPlayer" $ git branch * MyPlayer master * You can get the code https://github.com/23/videoplayer and
  30. 30. But I want to build my own player…So far, weve just been changing the set-up of the 23 Video standard players, but: Custom players are just SWF files reading the embed and using the API… and you can create a really custom player simply by uploading a SWF.
  31. 31. Easy to change LETS PLAY AROUND… ‣  Remove a few controlsa few minor ‣  Kill the rounded cornersdetails… ‣  Change padding between button ‣  A new play icon ‣  Make the srubber ugly
  32. 32. … and still enough You dont have to use the 23 Video player if you dont want to – since the player is just an ordinary API consumer.control to do ‣ Read in embed parameterswhatever you Which videos from which domain has been requested?want ‣ Get videos through the API Ask for detailed information about the video to be played with /api/photo/list ‣ Support sections+subtitles? Requires further requests to /api/photo/ subtitle/list and /api/photo/section/list ‣ Report back to analytics Make sure your custom player is sending information back to our analytics api. Will
  33. 33. ome examples of custom
  34. 34. When you restyle the open source player, makesure you allow yourself to be kept up-to-date$ git fetch origin $ git merge master Merge made by recursive. * If you make sure to keep the git repository intact when you download the source code, you can always retrieve and
  35. 35. Control the Flash player from JavaScriptSTART PLAYING ON LOAD function getFlexApp(appName) { return(document[appName] ? document[appName] : window[appName]); } Event.observe(window, load, function({ getFlexApp(playerName).play(); }); * You can find a list of all available methods for this kind of interaction at http://www.23developer.com/design/player-javascript
  36. 36. Control the Flash player from JavaScriptJUMP TO A SPECIFIC TIME IN THE PLAYER function getFlexApp(appName) { return(document[appName] ? document[appName] : window[appName]); } function playVideoFromSecond(sec, playerName){ playerName = playerName||videoplayer; var v = getFlexApp(playerName); if (v) { var state = v.getPlayState(); v.playVideo(); window.setTimeout(function(){v.setPlayheadTime(sec);}, (state===playing ? 0 : 1000)); return(false); } else { return(true); } }; Event.observe(window, load, function({ playVideoFromSecond(65);
  37. 37. Control the Flash player from JavaScriptLIVE EXAMPLEHow to retrieve titles, descriptionsthumbnails and more for the currentlyplaying clip?
  38. 38. ROADMAPFlash Builder 4‣  Weve o cially been on Flex 3 until now.‣  This week were switching to Flash Builder 4 as the supported platform.‣  In this release, well also have support for Sections & Subtitles.
  39. 39. COMMUNICATIONTalking to a 23 Video Site‣ Simple RESTful HTTP communication‣ Methods available under http://domain.tld/api/...‣ Responses available in common formats ‣ XML ‣ JSON‣ All documentation available on http://www.23developer.com/api/
  40. 40. AUTHENTICATIONGetting Permission‣ Three ways to authenticate ‣ OAuth 1.0a ‣ API tokens ‣ Anonymous access‣ Methods are categorized in six levels of access ‣ none – just go ahead, we don’t care who you are! ‣ anonymous – you’re allowed, if you have basic access ‣ read – read access to the API ‣ write – read and write access to the API ‣ admin – access to all but critical API calls ‣ super – full access to the API
  41. 41. AUTHENTICATIONOAuth 1.0aauthentication‣ Secure protocol ‣ No password exchanges ‣ Relies on SHA1 signature signing‣ Loads of great libraries‣ Signing requires tokens for an application ‣ Consumer key and consumer secret ‣ Access token and access token secret
  42. 42. AUTHENTICATIONAPI Tokens‣ Designed for giving third parties specific access‣ Requires a certain access level to obtain‣ No access level required to redeem
  43. 43. DATA MODELThe Grand Picture Video Site Section Subtitle Session User Tag Comment Channel
  44. 44. USING THE APICalling an API Method‣ Getting the 20 latest videos with the tag “23video” in JSON http://sample.23video.com/api/photo/list?tag=23video&size=20&orderby=created &order=desc&format=json‣ Breakdown ‣ /api/photo/list – the API method ‣ tag=23video – the tag we want ‣ size=20 – the number of videos we want listed ‣ orderby=created – the sorting mechanism used for selecting videos ‣ order=desc – descending sorting ‣ format=json – we want the response in JSON
  45. 45. USING THE APISession Signing‣ Perfect way to control access to content Get token Method: /api/session/get-token Returns: access token Permission level: super Redirect the user Method: /api/session/redeem-token Returns: signs the end user in and redirects them to a desired URL Permission level: none … and the user is in!
  46. 46. USING THE APIEnabling Uploads‣ Allow people to upload videos, without being administrators Get token for upload Method: /api/photo/get-upload-token Returns: upload token that can be used for uploading Permission level: write Present the user to an upload form Style and create an upload form as you need. Post the upload with the token Method: /api/photo/redeem-upload-token Returns: accepts the upload and returns the user to a specified URL Permission level: none Viola!
  47. 47. USING THE APIPingbacks‣ Having 23 Video tell you, when something changes on a site‣ Currently only notifies of changes in videos and encoding states‣ Great for speeding up API implementations through caching
  48. 48. ROADMAPO cial CMS Implementations‣ We’re constantly working on more implementations for popular CMS’‣ Umbraco 5.0 Universal Media Picker Provider package‣ We’d love your help and contributions!
  49. 49. ROADMAPBetter, Faster, Stronger‣ Pingbacks as a central element in API usage‣ Most new functionality will be exposed through the API ‣ Sections and subtitles are newly additions‣ Development is developer driven – your input matters
  50. 50. ‣  O cial librariesLibraries, 23 maintains an o cial .NET implementation writtsamples and in C# 3.5mplementations ‣  O cial implementations We have an o cial implementation for signing sessions as a Microsoft SharePoint Webpart ‣  Sample code Using something else? No problem! We have samp code for both PHP and Ruby readily available for yo use
  51. 51. ‣  Design guideResources for Details on how to set up the design on a 23 Video sgetting more how to design it and how to build players.nformation, code ‣  API documentationexamples, modules All the information about accessing and using the including sample scripts and libraries.and more ‣  Github Open sourced code from 23, including the video pla libraries and sample code. ‣  Forums/Community Asked and answered question for developers.
  52. 52. NEW STREAMFollow @23developeras a source of news,examples, oddities.(Will probably also work great forasking quick questions and gettingquick answers)
  53. 53. Or just ask us… @STEFFENTCHR STEFFENTCHR STEFFEN@23COMPANY.COM @NICKBRUUN NICK_BRUUN NICK@23COMPANY.COM

×