Slide 1
Slide 1 text
Building stu with 23 Video
Monday, December 17, 12
Slide 2
Slide 2 text
Ste en Tiedemann Christensen
CTO and co-founder, 23
Monday, December 17, 12
Slide 3
Slide 3 text
This is an experiment,
we’re as curious as you are...
Monday, December 17, 12
Slide 4
Slide 4 text
Are you design hackers or
content hackers?
Monday, December 17, 12
Slide 5
Slide 5 text
Agenda:
- What is 23 Video?
- Designing video websites with 23 Video
- Building video players
- The API
Monday, December 17, 12
Slide 6
Slide 6 text
QUICK AND DIRTY
INTRO TO 23 VIDEO
Monday, December 17, 12
Slide 7
Slide 7 text
(web development is
fundamentally changing)
Monday, December 17, 12
Slide 8
Slide 8 text
TV4.se
Monday, December 17, 12
Slide 9
Slide 9 text
system vs service
Monday, December 17, 12
Slide 10
Slide 10 text
Photos Questions Comments Articles
Sharing Teasers Ads Search
Related Tags Meta data Video
API Users Members Payment
http://http.tv4.se/2011/11/24/om-utveckling-pa-ind11/
Monday, December 17, 12
Slide 11
Slide 11 text
Photos Questions Comments Articles
Sharing Teasers Ads Search
Related Tags Meta data Video
API Users Members Payment
Monday, December 17, 12
Slide 12
Slide 12 text
The nice thing about platforms: They lets you
attach yourself to someone elses roadmap
Monday, December 17, 12
Slide 13
Slide 13 text
Full OAuth 2.0 API
Notification box
Disqus Ranks
@mentions
Google Login
Photo uploads with comments
New theme editor
Facebook API integration
Mobile theme
Analytics
356 DAYS AFTER SWITCHING TO
DISQUS, WITH NO DEDICATED
DEVELOPMENT
Monday, December 17, 12
Slide 14
Slide 14 text
Now
Then
FRAMEWORKS
SERVER-SIDE
STATIC HTML
Eras + Stacks
Monday, December 17, 12
Slide 15
Slide 15 text
Now
Then
FRAMEWORKS
“Drupal Programmer”
SERVER-SIDE
“PHP Programmer”
STATIC HTML
“HTML Programmer”
Eras + Stacks
Monday, December 17, 12
Slide 16
Slide 16 text
Now
Then
FRAMEWORKS
“Drupal Programmer”
SERVER-SIDE
“PHP Programmer”
STATIC HTML
“HTML Programmer”
Eras + Stacks
PLATFORMS
“?”
Monday, December 17, 12
Slide 17
Slide 17 text
PATCHWORK
Monday, December 17, 12
Slide 18
Slide 18 text
23 VIDEO IS THE PIECE
OF THE PUZZLE FOR VIDEO
Monday, December 17, 12
Slide 19
Slide 19 text
Customer service
Marketing campaigns
Tra c generation
Competitions
Sales support
Knowledge sharing
Journalism
Branding
Internal communication
Trainings
Events + Conferences
Product demonstrations
Media
Archives
Documentation
23 VIDEO MAKES
VIDEO WEBSITES AVAILABLE
FOR COMPANIES &
ORGANIZATIONS
Monday, December 17, 12
Slide 20
Slide 20 text
Your own design
Your own video player
Your own domain
Analytics and tracking
Social distribution
Section and subtitles
Unlimited uploads
Upload once, play anywhere
Native mobile and HTML5
Playflow and advertising
Open upload
Access control
Built-in CDN
Secure, OAuth-based API
... TO HELP BUILD A
RELATIONSHIP TO YOUR
AUDIENCE THROUGH VIDEO
Monday, December 17, 12
Slide 21
Slide 21 text
Some examples of how
people are using 23 Video
Monday, December 17, 12
Slide 22
Slide 22 text
300+ VIDEO WEBSITES
Monday, December 17, 12
Slide 23
Slide 23 text
WITH 115 PARTNERS IN THIRTEEN COUNTRIES
Monday, December 17, 12
Slide 24
Slide 24 text
But what is it really?
Monday, December 17, 12
Slide 25
Slide 25 text
WHAT’S HIDING IN
THE DESIGN SECTION?
Monday, December 17, 12
Slide 26
Slide 26 text
Monday, December 17, 12
Slide 27
Slide 27 text
Monday, December 17, 12
Slide 28
Slide 28 text
Monday, December 17, 12
Slide 29
Slide 29 text
Monday, December 17, 12
Slide 30
Slide 30 text
http://video.kglteater.dk
http://tv.kilroy.eu
http://video.novonordisk.com
http://video.vestas.com
http://www.novozymes.tv
http://video.dbu.dk
http://video.unity3d.com
http://video.um.dk
EXAMPLES...
Monday, December 17, 12
Slide 31
Slide 31 text
A video tool for web people,
built by web people
(that’s the bullshit marketing way of saying that 23 Video is a hosted platform -- but we haven’t invented
anything new for you to learn. It’s just HTML, CSS, graphic files, JavaScript and the glue to bind it together.
The di erent is that it’s built from the ground up specifically for video.)
Monday, December 17, 12
Slide 32
Slide 32 text
Layout blocks
CSS (and JavaScript)
Liquid
Templates
Thumbnails
Players
Monday, December 17, 12
Slide 33
Slide 33 text
Video thumbnails,
Channels,
Download,
Share,
Subscribe
Ratings,
Comments,
HTML,
HTML Import,
3rd Party
Monday, December 17, 12
Slide 34
Slide 34 text
Slide 35
Slide 35 text
{% for photo in photos %}
{{photo.video_length}}
{{photo.content}}
{% endfor %}
Monday, December 17, 12
Slide 36
Slide 36 text
Let’s actually try
and build something
Monday, December 17, 12
Slide 37
Slide 37 text
BUILDING BRANDED
VIDEO PLAYERS
Monday, December 17, 12
Slide 38
Slide 38 text
A few things about players
Admins can create as many di erent players and configs as needed
A configuration can change both the player code and the display settings
One player will be the default and is used in most cases.
Editors can choose to use other player when getting embed code from the backend
Such players can also be used in integrations with other systems, for example through the API
Configs are loaded dynamically, so embed codes won’t change when the configuration does
Monday, December 17, 12
Slide 39
Slide 39 text
Monday, December 17, 12
Slide 40
Slide 40 text
Monday, December 17, 12
Slide 41
Slide 41 text
Monday, December 17, 12
Slide 42
Slide 42 text
Monday, December 17, 12
Slide 43
Slide 43 text
Monday, December 17, 12
Slide 44
Slide 44 text
Technically, they’re just iframes
Technically, players are just HTML, JavaScript, CSS and Flash
Every embed code loads a piece of HTML, which in turn does feature detection and builds the player
Using the standard embed code, we handle Flash, HTML5 and mobile devices
Cross-browser support for WebM and H.264 files (Safari 5+, Chrome, Firefox 4+, Opera 10+, Internet Explorer 9+)
Monday, December 17, 12
Slide 45
Slide 45 text
Embed parameters
WHAT TO SHOW IN THE PLAYER?
src="/v.ihtml?
photo_id=12345
&token=abcd
&album_id=67890
&tag=demodemo
"/>
src="/v.ihtml?
backgroundColor=yellow
&showTray=0
&autoPlay=1
&start=120
"/>
HOW TO SHOW THE PLAYER? (explicitly overrides the config for the player)
// Which video should be played?
// If the video is unpublished, a secret token is needed
// Which channel to include videos from?
// Which tag to include video from?
// Make sure the player background is yellow
// Don't show the player controls in the tray
// Start playing immediately on load
// And start the video 2 minutes in
Monday, December 17, 12
Slide 46
Slide 46 text
The switch to Liquid
Currently:
Our full player code is Flash. A SWF file is bootstrapped through the iframe. The SWF file talks to the API.
Feature-detection and fallback is handled through JavaScript. We use native browser players.
Quite soon:
We will move to building the player entirely in HTML. The code base is open source and built on Liquid.
The video playback may run in Flash or in HTML5, but this is handled transparently through Eingebaut.js.
Monday, December 17, 12
Slide 47
Slide 47 text
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
http://www.23developer.com/design/player-build goes into details
Monday, December 17, 12
Slide 48
Slide 48 text
Building your own player
The player is just a piece of HTML in your control.
We have created a full stack, but it’s still just an API consumer.
This means that you can build your own player entirely from scratch (or by reusing some of our tools)
Monday, December 17, 12
Slide 49
Slide 49 text
Building your own player
Read in embed parameters
Which videos from which domain has been requested?
Get videos through the API
Ask for detailed information about the videos 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 /api/analytics/report/*.
Monday, December 17, 12
Slide 50
Slide 50 text
NOW MY SITE IS UP,
WHAT ELSE SHOULD I BE DOING?
Monday, December 17, 12
Slide 51
Slide 51 text
Mobile site
SEO
Distribution
Facebook Page
Monday, December 17, 12
Slide 52
Slide 52 text
Embedding Social Sharing
Subscriptions Podcasting
Video SEO Distribution
Push notifications Media Centers
Monday, December 17, 12
Slide 53
Slide 53 text
Monday, December 17, 12
Slide 54
Slide 54 text
INTEGRATING WITH
23 VIDEO AND THE API
Monday, December 17, 12
Slide 55
Slide 55 text
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.23video.com/api/
COMMUNICATION
Monday, December 17, 12
Slide 56
Slide 56 text
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
AUTHENTICATION
Monday, December 17, 12
Slide 57
Slide 57 text
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
AUTHENTICATION
Monday, December 17, 12
Slide 58
Slide 58 text
API Tokens
‣Designed for giving third parties specific access
‣Requires a certain access level to obtain
‣No access level required to redeem
AUTHENTICATION
Monday, December 17, 12
Slide 59
Slide 59 text
The Grand Picture
DATA MODEL
Channel
Comment
Video
Section Subtitle
Site
Session
Tag
User
Monday, December 17, 12
Slide 60
Slide 60 text
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
USING THE API
Monday, December 17, 12
Slide 61
Slide 61 text
Session Signing
‣Perfect way to control access to content
USING THE API
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!
Monday, December 17, 12
Slide 62
Slide 62 text
Enabling Uploads
‣Allow people to upload videos, without being administrators
USING THE API
Get token for upload
Method: /api/photo/get-upload-token
Returns: upload token that can be used for uploading
Permission level: write
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!
Present the user to an upload form
Style and create an upload form as you need.
Monday, December 17, 12
Slide 63
Slide 63 text
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
USING THE API
Monday, December 17, 12
Slide 64
Slide 64 text
64
Monday, December 17, 12
Slide 65
Slide 65 text
Help Center
http://help.23video.com
Github
http://github.com/23
Libraries
http://www.23video.com/api#libraries
API Documentation
http://www.23video.com/api
Open Source
http://www.23video.com/opensource
Just try it out...
(it really should be quite easy)
Monday, December 17, 12
Slide 66
Slide 66 text
www.23video.com
@23video
Monday, December 17, 12