Developer Training 2011

Transcript

2. Steffen Tiedemann Christensen CTO & Co-founder @steffentchr steffen@23company.com
3. Nick Bruun Lead Developer @nickbruun nick@23company.com
4. ‣ 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
5. THE OVERVIEW
6. … and more 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. $675 / month including 1TB traffic & all software updates One price.
11. ‣ 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
12. 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
13. 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
14. Open Upload 2.0 ‣Custom variables in upload forms ‣Embeddable open upload for easy integration with existing sites ROADMAP
15. 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
16. THE DESIGN
17. The Grid ‣The shape of a 23 Video site THE DESIGN DNA
18. 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
19. The Effect ‣Same building blocks – completely different looks THE DESIGN DNA
20. The Technologies ‣Standard web technologies ‣CSS ‣HTML ‣JavaScript ‣Everything is editable from the backend ‣All content is hosted by 23 CUSTOMIZING
21. The Layout in HTML CUSTOMIZING
22. The Block in HTML CUSTOMIZING <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. 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
25. The Syntax for Customization GOING ADVANCED %background-color% { name: 'Site background color'; type: color; default: #fafafa; } body { background-color: %background-color%; }
26. Tricks with Custom Colors GOING ADVANCED %background-color% { .. } body { background-color: %background-color%; } #header { background-color: %background-color+15%; }
27. 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
28. THE PLAYER
29. ‣ 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
30. 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
31. 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.
32. 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
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 http://www.23developer.com/design/player-build goes into details
34. 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…
35. ‣ 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…
36. 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
37. Some examples of custom players built for the platform
38. Novozymes | http://www.novozymes.tv
39. Carlsberg Sport | http://tv.carlsbergsport.dk
40. COWI | http://www.cowi.com
41. Interton | http://www.interton.tv
42. DMI | http://www.dmi.dk
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 merge in new additions and features from the player automatically.
44. 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
45. 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
46. Control the Flash player from JavaScript LIVE EXAMPLE How to retrieve titles, descriptions thumbnails and more for the currently playing clip?
47. 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
48. THE API
49. 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
50. 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
51. 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
52. API Tokens ‣Designed for giving third parties specific access ‣Requires a certain access level to obtain ‣No access level required to redeem AUTHENTICATION
53. The Grand Picture DATA MODEL Channel Comment Video Section Subtitle Site Session Tag User
54. 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
55. 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!
56. 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.
57. 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
58. 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
59. 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
60. ‣ 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
61. THE COMMUNITY
62. ‣ 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
63. Follow @23developer as a source of news, examples, oddities. (Will probably also work great for asking quick questions and getting quick answers) NEW STREAM
64. @STEFFENTCHR @NICKBRUUN STEFFENTCHR NICK_BRUUN STEFFEN@23COMPANY.COM NICK@23COMPANY.COM Or just ask us…