23 developer training
DESCRIPTION
The slide deck from recent developer training performed by the developers at 23. Hit us up if you'reTRANSCRIPT
‣ The Overview
Overview and demo of 23 Video
‣ The Design
Customizing every detail of a videosite
‣ The Player
Using and customizing video players
‣ The API
Mash up, extend and integrate the product
‣ The Community
Getting more info and keeping updated
(We'll do the nitty-gritty details and end off
each part with plenty of examples and an
overview of our roadmap.)
The developer introduction to the product– or merely 23 Video for geeks…
AGENDA
THE OVERVIEW
… and more
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 and lock-in
‣ Hosted as service with full support
$675 / month including 1TB traffic & all software updates
One price.
‣ Brand channels Novozymes | http:/www./novozymes.tv
‣ Community Hjemmeværnet | http://film.hjv.dk
‣ 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
‣ Video section The Royal Danish Theater | http://video.kglteater.dk
Some examples of how people are using 23 Video
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
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.
ROADMAP
Open Upload 2.0 ‣Custom variables in upload forms
‣Embeddable open upload for easy integration with existing sites
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.
ROADMAP
THE DESIGN
The Grid ‣The shape of a 23 Video site
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
THE DESIGN DNA
The Effect ‣Same building blocks – completely different looks
THE DESIGN DNA
The Technologies ‣Standard web technologies
‣CSS
‣HTML
‣JavaScript
‣Everything is editable from the backend
‣All content is hosted by 23
CUSTOMIZING
The Layout in HTML
CUSTOMIZING
The Block in HTML
CUSTOMIZING
<div id="block<unique block ID>"
class="layout-block <block-specific
class> [layout-block-empty]">
..
</div>
Let’s have a crack at it!
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.)
GOING ADVANCED
The Syntax for Customization
GOING ADVANCED
%background-color%
{
name: 'Site background color';
type: color;
default: #fafafa;
}
body
{
background-color: %background-color%;
}
Tricks with Custom Colors
GOING ADVANCED
%background-color%
{
..
}
body
{
background-color: %background-color%;
}
#header
{
background-color: %background-color+15%;
}
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
ROADMAP
THE PLAYER
‣ Admins can create a many different 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
Setting up players and embedding
The anatomy of an embed code
<embed width="580" height="435" src="http://videos.example.com/v.swf"
allowfullscreen="true" allowscriptaccess="always" flashvars="photo_id=12345"/>
<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>
SIMPLE FLASH VERSION
NOT AS PRETTY JAVASCRIPT VERSION – BUT HANDLES FALLBACK TO HTML5 WHEN FLASH ISN'T AVAILABLE
On devices such as iPhone, iPad and most
mobiles, Flash isn't available to handle the
video playback. Here, we fall back
automatically to html5.
Currently, we'll be using the browser's
standard player design for the video; but this is
changing.
With the transition of styling to Liquid and
control of all html, we want to use the same
templating model for customizing the html5
player.
Cross-browser support mixing WebM and
H.264 files: Safari 5, Chrome, Firefox 4, Opera
10, Internet Explorer 9.
If you embed correctly, html5 is supported out of the box – including on mobile devices.
The anatomy of an embed code
flashvars="
photo_id=12345
&token=abcd
&album_id=67890
&tag=demodemo
"/>
WHAT TO SHOW IN THE PLAYER?
flashvars="
backgroundColor=yellow
&showTray=0
&autoPlay=1
&start=120
"/>
HOW TO SHOW THE PLAYER? (explicitly overrides the config for the player)
* http://www.23developer.com/design/player-embed has a full list of options.
// 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
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
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.
But I want to build my own player…
‣ Remove a few controls
‣ Kill the rounded corners
‣ Change padding between
button
‣ A new play icon
‣ Make the srubber ugly
Easy to change a few minor details…
LET'S PLAY AROUND…
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.
‣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 our analytics api. Will
usually reuse the 23 analytics component.
… and still enough control to do whatever you want
Some examples of custom players built for the platform
Novozymes | http://www.novozymes.tv
Carlsberg Sport | http://tv.carlsbergsport.dk
COWI | http://www.cowi.com
Interton | http://www.interton.tv
DMI | http://www.dmi.dk
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
merge in new additions and features from the player automatically.
Control the Flash player from JavaScript
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
START PLAYING ON LOAD
Control the Flash player from JavaScript
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);
});
JUMP TO A SPECIFIC TIME IN THE PLAYER
Control the Flash player from JavaScript
LIVE EXAMPLE
How to retrieve titles, descriptions thumbnails and more for the currently playing clip?
Flash Builder 4 ‣We've officially 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.
ROADMAP
THE API
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/
COMMUNICATION
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
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
API Tokens
‣Designed for giving third parties specific access
‣Requires a certain access level to obtain
‣No access level required to redeem
AUTHENTICATION
The Grand Picture
DATA MODEL
Channel Comment
Video
Section Subtitle
Site
Session
Tag
User
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
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!
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.
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
Official 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!
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
ROADMAP
‣ Official libraries
23 maintains an official .NET implementation written
in C# 3.5
‣ Official implementations
We have an official implementation for signing
sessions as a Microsoft SharePoint Webpart
‣ Sample code
Using something else? No problem! We have sample
code for both PHP and Ruby readily available for you to
use
Libraries, samples and implementations
THE COMMUNITY
‣ Design guide
Details on how to set up the design on a 23 Video site,
how to design it and how to build players.
‣ API documentation
All the information about accessing and using the API,
including sample scripts and libraries.
‣ Github
Open sourced code from 23, including the video player,
libraries and sample code.
‣ Forums/Community
Asked and answered question for developers.
Resources for getting more information, code examples, modules and more
Follow @23developer as a source of news, examples, oddities. (Will probably also work great for asking quick questions and getting quick answers)
NEW STREAM
