23 Video Developer Training, December 2012

Transcript

1. Building stu with 23 Video Monday, December 17, 12
2. Ste en Tiedemann Christensen CTO and co-founder, 23 Monday, December 17, 12
3. This is an experiment, we’re as curious as you are... Monday, December 17, 12
4. Are you design hackers or content hackers? Monday, December 17, 12
5. Agenda: - What is 23 Video? - Designing video websites with 23 Video - Building video players - The API Monday, December 17, 12
6. QUICK AND DIRTY INTRO TO 23 VIDEO Monday, December 17, 12
7. (web development is fundamentally changing) Monday, December 17, 12
8. TV4.se Monday, December 17, 12
9. system vs service Monday, December 17, 12
10. 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
11. Photos Questions Comments Articles Sharing Teasers Ads Search Related Tags Meta data Video API Users Members Payment Monday, December 17, 12
12. The nice thing about platforms: They lets you attach yourself to someone elses roadmap Monday, December 17, 12
13. 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
14. Now Then FRAMEWORKS SERVER-SIDE STATIC HTML Eras + Stacks Monday, December 17, 12
15. Now Then FRAMEWORKS “Drupal Programmer” SERVER-SIDE “PHP Programmer” STATIC HTML “HTML Programmer” Eras + Stacks Monday, December 17, 12
16. Now Then FRAMEWORKS “Drupal Programmer” SERVER-SIDE “PHP Programmer” STATIC HTML “HTML Programmer” Eras + Stacks PLATFORMS “?” Monday, December 17, 12
17. PATCHWORK Monday, December 17, 12
18. 23 VIDEO IS THE PIECE OF THE PUZZLE FOR VIDEO Monday, December 17, 12
19. 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
20. 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
21. Some examples of how people are using 23 Video Monday, December 17, 12
22. 300+ VIDEO WEBSITES Monday, December 17, 12
23. WITH 115 PARTNERS IN THIRTEEN COUNTRIES Monday, December 17, 12
24. But what is it really? Monday, December 17, 12
25. WHAT’S HIDING IN THE DESIGN SECTION? Monday, December 17, 12
26. Monday, December 17, 12
27. Monday, December 17, 12
28. Monday, December 17, 12
29. Monday, December 17, 12
30. 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
31. 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
32. Layout blocks CSS (and JavaScript) Liquid Templates Thumbnails Players Monday, December 17, 12
33. Video thumbnails, Channels, Download, Share, Subscribe Ratings, Comments, HTML, HTML Import, 3rd Party Monday, December 17, 12
34. <div class="view-photo"> <a href="/video/123/my-video-clip"> <img src="/456/123/abcef/thumbnail.jpg" width="320" height="180" /> </a> </div> <div class="view-video-length">3:45</div> <div class="view-title"> <a href="/video/123/my-video-clip">My video clip</a> </div> <div class="view-words">I have made a video, and this is it.</div> Monday, December 17, 12
35. {% for photo in photos %} <div class="view-photo"> <a href="{{photo.one}}"> <img src="{{photo.thumbnail_url}}" width="{{photo.thumbnail_width}}" height="{{photo.thumbnail_height}}" /> </a> </div> <div class="view-video-length">{{photo.video_length}}</div> <div class="view-title"> <a href="{{photo.one}}">{{photo.title}}</a> </div> <div class="view-words">{{photo.content}}</div> {% endfor %} Monday, December 17, 12
36. Let’s actually try and build something Monday, December 17, 12
37. BUILDING BRANDED VIDEO PLAYERS Monday, December 17, 12
38. 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
39. Monday, December 17, 12
40. Monday, December 17, 12
41. Monday, December 17, 12
42. Monday, December 17, 12
43. Monday, December 17, 12
44. 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
45. 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
46. 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 <video> 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
47. 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
48. 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
49. 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
50. NOW MY SITE IS UP, WHAT ELSE SHOULD I BE DOING? Monday, December 17, 12
51. Mobile site SEO Distribution Facebook Page Monday, December 17, 12
52. Embedding Social Sharing Subscriptions Podcasting Video SEO Distribution Push notifications Media Centers Monday, December 17, 12
53. Monday, December 17, 12
54. INTEGRATING WITH 23 VIDEO AND THE API Monday, December 17, 12
55. 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
56. 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
57. 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
58. 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
59. The Grand Picture DATA MODEL Channel Comment Video Section Subtitle Site Session Tag User Monday, December 17, 12
60. 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
61. 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
62. 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
63. 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
64. 64 Monday, December 17, 12
65. 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
66. www.23video.com @23video Monday, December 17, 12