2. CTO & Co-founder
@ste entchr
ste en@23company.com

3. Lead Developer
@nickbruun
nick@23company.com

4. The developer AGENDA
‣ The Overview
ntroduction to the Overview and demo of 23 Video
‣ The Design
product– or Customizing every detail of a videosite
‣ The Player
merely 23 Video Using and customizing video players
‣ The API
for geeks… Mash up, extend and integrate the product
‣ The Community
Getting more info and keeping updated
(We'll do the nitty-gritty details and end o
each part with plenty of examples and an
overview of our roadmap.)

6. Powering 200+ customers

7. Through a network of 100+ partners

8. demo!

9. 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

10. One price.
$675 / month
including 1TB tra c & all software updates

11. Some examples of ‣ Brand channels
Novozymes | http:/www./novozymes.tv
how people are ‣ Community
Hjemmeværnet | http://film.hjv.dk
using 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

12. ROADMAP
Sections & 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

13. ROADMAP
Global 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.

14. ROADMAP
Open Upload 2.0
‣ Custom variables in upload forms
‣ Embeddable open upload for easy integration with existing sites

15. ROADMAP
Analytics 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.

17. THE DESIGN DNA
The Grid
‣ The shape of a 23 Video site

18. THE DESIGN DNA
Block 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 available
About the site Channel list Comments form
Contextual video player Download videos Footer
HTML Block Import HTML from URL Link to login
Links to pages List of comments Menu
Name and logo New videos Open upload
Play list Popular videos Rate object
Search box Sections Share
Subscribe Tag cloud Users
Video overview Video thumbnails Web analytics

19. THE DESIGN DNA
The E ect
‣ Same building blocks – completely di erent looks

20. CUSTOMIZING
The Technologies
‣ Standard web technologies
‣ CSS
‣ HTML
‣ JavaScript
‣ Everything is editable from the backend
‣ All content is hosted by 23

21. CUSTOMIZING
The Layout in HTML

22. CUSTOMIZING
The Block in HTML
<div id="block<unique block ID>"
class="layout-block <block-specific
class> [layout-block-empty]">
..
</div>

23. Let’s have a
crack at it!

24. GOING ADVANCED
Customizable 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.)

25. GOING ADVANCED
The Syntax for Customization
%background-color%
{
name: 'Site background color';
type: color;
default: #fafafa;
}
body
{
background-color: %background-color%;
}

26. GOING ADVANCED
Tricks with Custom Colors
%background-color%
{
..
}
body
{
background-color: %background-color%;
}
#header
{
background-color: %background-color+15%;
}

27. ROADMAP
Customization 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

29. Setting up players
and 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 won't change when a configuration
does

30. The anatomy of an embed code
SIMPLE 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 ISN'T 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>

31. f you embed On devices such as iPhone, iPad and most
mobiles, Flash isn't available to handle the
video playback. Here, we fall back
correctly, html5 is automatically to html5.
supported out of Currently, we'll be using the browser's standar
player design for the video; but this is changing
the 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 html5
mobile devices.
player.
Cross-browser support mixing WebM and H.
264 files: Safari 5, Chrome, Firefox 4, Opera 10
Internet Explorer 9.

32. The anatomy of an embed code
WHAT 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 // Don't 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.

33. Our own players are all open
sourced 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

34. But I want to build my own player…
So far, we've 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.

35. Easy to change LET'S PLAY AROUND…
‣ Remove a few controls
a few minor
‣ Kill the rounded corners
details…
‣ Change padding between
button
‣ A new play icon
‣ Make the srubber ugly

36. … and still enough You don't have to use the 23 Video player if you
don't want to – since the player is just an
ordinary API consumer.
control to do
‣ Read in embed parameters
whatever 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

37. ome examples of custom

43. When you restyle the open source player, make
sure 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

44. Control the Flash player from JavaScript
START 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

45. Control the Flash player from JavaScript
JUMP 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);

46. Control the Flash player from JavaScript
LIVE EXAMPLE
How to retrieve titles, descriptions
thumbnails and more for the currently
playing clip?

47. ROADMAP
Flash Builder 4
‣ We've o cially been on Flex 3 until now.
‣ This week we're switching to Flash Builder 4 as the supported platform.
‣ In this release, we'll also have support for Sections & Subtitles.

49. COMMUNICATION
Talking 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/

50. AUTHENTICATION
Getting 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

51. AUTHENTICATION
OAuth 1.0a
authentication
‣ 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

52. AUTHENTICATION
API Tokens
‣ Designed for giving third parties specific access
‣ Requires a certain access level to obtain
‣ No access level required to redeem

53. DATA MODEL
The Grand Picture
Video Site
Section Subtitle Session User
Tag Comment Channel

54. USING THE API
Calling 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

55. USING THE API
Session 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!

56. USING THE API
Enabling 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!

57. USING THE API
Pingbacks
‣ 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

58. ROADMAP
O 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!

59. ROADMAP
Better, 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

60. ‣ O cial libraries
Libraries, 23 maintains an o cial .NET implementation writt
samples and in C# 3.5
mplementations ‣ 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

62. ‣ Design guide
Resources for Details on how to set up the design on a 23 Video s
getting more how to design it and how to build players.
nformation, code ‣ API documentation
examples, 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.

63. NEW STREAM
Follow @23developer
as a source of news,
examples, oddities.
(Will probably also work great for
asking quick questions and getting
quick answers)

64. Or just ask us…
@STEFFENTCHR STEFFENTCHR STEFFEN@23COMPANY.COM
@NICKBRUUN NICK_BRUUN NICK@23COMPANY.COM