Developer Training 2011

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Steffen Tiedemann Christensen CTO & Co-founder @steffentchr [email protected]

Slide 3

Slide 3 text

Nick Bruun Lead Developer @nickbruun [email protected]

Slide 4

Slide 4 text

‣ 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

Slide 5

Slide 5 text

THE OVERVIEW

Slide 6

Slide 6 text

… and more Powering 200+ customers

Slide 7

Slide 7 text

Through a network of 100+ partners

Slide 8

Slide 8 text

demo!

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

$675 / month including 1TB traffic & all software updates One price.

Slide 11

Slide 11 text

‣ 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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

THE DESIGN

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

The Effect ‣Same building blocks – completely different looks THE DESIGN DNA

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

The Layout in HTML CUSTOMIZING

Slide 22

Slide 22 text

The Block in HTML CUSTOMIZING

Slide 23

Slide 23 text

Let’s have a crack at it!

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

THE PLAYER

Slide 29

Slide 29 text

‣ 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

Slide 30

Slide 30 text

The anatomy of an embed code

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'}); SIMPLE FLASH VERSION NOT AS PRETTY JAVASCRIPT VERSION – BUT HANDLES FALLBACK TO HTML5 WHEN FLASH ISN'T AVAILABLE

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 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

Slide 34

Slide 34 text

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…

Slide 35

Slide 35 text

‣ 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…

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Some examples of custom players built for the platform

Slide 38

Slide 38 text

Novozymes | http://www.novozymes.tv

Slide 39

Slide 39 text

Carlsberg Sport | http://tv.carlsbergsport.dk

Slide 40

Slide 40 text

COWI | http://www.cowi.com

Slide 41

Slide 41 text

Interton | http://www.interton.tv

Slide 42

Slide 42 text

DMI | http://www.dmi.dk

Slide 43

Slide 43 text

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.

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

THE API

Slide 49

Slide 49 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.23developer.com/api/ COMMUNICATION

Slide 50

Slide 50 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

Slide 51

Slide 51 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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 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

Slide 55

Slide 55 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!

Slide 56

Slide 56 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.

Slide 57

Slide 57 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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

‣ 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

Slide 61

Slide 61 text

THE COMMUNITY

Slide 62

Slide 62 text

‣ 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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

@STEFFENTCHR @NICKBRUUN STEFFENTCHR NICK_BRUUN [email protected] [email protected] Or just ask us…

Slide 65

Slide 65 text

No content