Intro to TwentyThree's Player Builder

 I'm Steffen, I'm part of the product team here at TwentyThree. So what I want to show you today is how the Player Builder works in TwentyThree Video.  Basically, players in TwentyThree Video are based around HTML but work on HTML5 on all devices and actually fall back gracefully to working on Flash as well.  And so what we do is enable you to create your own custom designs and actually use those designs as you embed players and as you build video websites as well.  So here I'm setting up a new player. I'm actually setting up a new player design and I'm forking that from an existing design in TwentyThree Video.  I'm selecting a thumbnail that will identify the player afterwards as well. And this takes me to the Player Builder itself.  So the Player Builder is pretty advanced. It allows you to write code, everything from advanced JavaScript to liquid templates and just modifying some CSS as well.  As you navigate around the code, you can see you can go into full screen, you can build and play stuff, you can see a preview of how the player works.  And you can navigate files, again everything from CSS, JavaScript, PNG assets and pretty much every piece of graphic as well.  Obviously, you can update the preview as you edit the code.  Rescaling the player just to see how it works in every size and you can also get an iframe embed to use afterwards.  There are a lot of ways of working with modules and files in the Player Builder as well.  So what you can see here is that you can add new files, you can always delete the files again, you can drop in files, asset files such as graphics, play buttons and close buttons and all that kind of stuff.  And you can add new modules and deactivate the modules depending on how and which features you're going to be using in your custom player.  Alright, so before we get too much further, what we're going to do today over the next 25 minutes is basically build a player for 23 video itself.  So we have a player design, that player design has already been built in Photoshop, it has a big play button, some easy way of showing titles, rubbers, times, switching between qualities.  You can see the design has been set up so it works pretty well with different thumbnails, hover effects on asset files.  And you can also actually see how there's a state when the video is paused that allow you to obviously play again but also to see recommended videos, to share the content and so on.  So this is basically the player that we're going to try to build over the next few minutes.  So what I've already done is basically cut out all the assets here.  So I have all the icons that I want to be using for the player ready both in standard versions and in written versions.  Making sure that it works awesomely across all devices, also for original screens whether that's on Macs, iPads or iPhones.  So going back to the player builder again, switching on my full screen here and I can see the player.  I'm basically taking an existing player and just working with that.  You can see that the player is just a piece of HTML that I can interact with.  I can interact through the console and I can even inspect elements as a part of the player as well.  So as I start out here, we'll actually see that there are three pretty important files.  The design liquid file. Liquid files are basically just HTML files with a bit of extra templating markup.  These allow you to bootstrap different modules. In this case we have a status display, we have a core module that handles all the communication between video, there's analytics.  Then there are all the bits and pieces that we probably want to be changing in order to do a custom design.  So that's the play buttons, the pause buttons, the full screen buttons, whether we want volume buttons, sharing options, recommendations, timeline scrubber.  All that kind of stuff that we actually want to be designing somewhat as we go along.  So what I'm doing here is I'm basically setting up the grid for the player itself.  So I have an info pane, that's the title. I have a big play button, that's basically the big play button that I want in the middle of the player.  Then I have all the controls, so that's a smaller play-pause button, that's a button to switch between full screen and not full screen state.  And also a button to actually switch around quality for the player as well.  Again, as I go along here, I can just bootstrap some simple modules. I want a scrubber, obviously, so people can navigate the timeline.  I want to enable some sharing stuff, we'll be using that module later on as we go along.  And then that's it. This makes it a pretty simple player that only uses some of our modules.  But it also means that it should be pretty easy to customize that and make it look just like we want.  What you're seeing here is basically the midway point where I've disabled a lot of stuff, moved stuff around in the grid.  But we still have the full preview available.  A lot of the boilerplate code that actually is used in the standard players handle cases for pop-up menus, handle cases for loading in settings for background colors, different buttons, different looks and feels.  And all of that we actually want to skip in this case where we want to assign the player exactly how we want it to.  It doesn't really need to be that adaptable to different styles.  So a lot of the design.js file here I'll actually just cut away because we won't be using it.  I'll save that and update again. So we'll see basically the same thing here.  Pretty simple changes just to make sure that it doesn't get in the way of the design that we want to do later.  Design.js is probably the most interesting file. So this is where all the bits and pieces that are loaded in through modules are styled.  Usually you can have CSS files for each individual module, but in most cases we just want to put all the design in design CSS itself.  So you can see everything from the overall grid to individual modules, info sharing, scrubber, play buttons, all that kind of stuff is put in here.  So let's start out actually building some design. First of all we want to load a 23 video specific font.  That's called the antenna extra light font. We want to be using that throughout the project.  So let's start out by importing that from its location online.  So we want to load the design in the CSS file.  So let's start out by importing that from its location online and update the body code just to reflect this choice.  So we want to be using a white font. We want to have antenna extra light with some fallbacks everywhere throughout the project.  And we obviously want to set the size and the line height and kind of good defaults for how the player actually is going to look.  After that we can see a lot of this code in here is basically written for a more advanced player than the one that we're building here.  So we probably even want to remove some stuff. Obviously let's start by giving some text shadow to the page here.  And then simply delete some of the stuff that we actually won't be using.  So as I'm saving the file and updating here, we can actually see that some of the design will slowly come to life.  So the next step, pretty simple. I want to take all the asset files that are already prepared ahead of time and I want to upload them to my project just by taking them from where I put them on my hard drive and just dragging them into the right module.  So in this case I'm placing all of my asset files in the design module. That also means that I'm going to have a pretty easy time referencing them from design CSS.  So now I'll also be able to see all the newly uploaded assets in the design module. So I can kind of browse them and preview them and see that everything looks exactly how I want it to.  So the next step becomes to use all these assets. For that I'm going to design the CSS and start actually referencing each individual PNG file. Once we deploy this, these will actually be compiled directly into the CSS file.  So once we actually build and deploy, what will happen is that all the PNG files will turn into data UIs and those will be GZIPed when they're hosted on the 23 video servers.  So in this case what I want to do is pretty simple. I have some play buttons, some full screen buttons, Twitter links and Facebook links and all that kind of stuff. And those I want to put in or connect to those files that I just uploaded.  So what I'll do first here is obviously use the standard files, play, replay, pause, Facebook, Twitter. And the next step becomes to use those same classes but add a pseudo hover class and use the hover versions or the mouseover versions of each individual graphic.  And obviously when I'm done with that, I'll take all of these and just apply it to some preferences for how big is the background actually going to be in the version here. This is actually only going to be used in modern browsers because the rescaling of background assets will only be applicable for written versions.  So that obviously becomes the next step after I'm done with matching all of my buttons and event names here, so class names here.  So I'll do the exact same thing again just for written versions. For those that don't know, written versions are basically just a way of giving better or twice as good graphic files for better screens mostly used for iPads and for iPhones.  It might be a good time to actually say that one of the key features of these players is that actually they will work pretty much everywhere. So on an iPad, on an iPhone, iPads obviously, other tablets basically everywhere.  So basically everywhere that there's a web browser, whether that's a modern one shipped with a mobile device, whether that's in Chrome like I'm showing off here, other modern browsers, or whether it's actually for older browsers. So these players will, obviously if the HTML that you write and the CSS that you write works as well, these players will work pretty seamlessly in IE7 and upwards. So pretty much every Internet Explorer browser will also be targeted with the exact same code that you're writing here.  So finally to actually use the graphics, I'll scroll up and find the code that has already been written for buttons, kind of clear it out because we'll only be using two different kinds of buttons here, big ones and small ones. The big ones are the 90 by 90 ones, basically the big buttons, play buttons, replay buttons, sharing ones. The small ones are for full screen and for pause.  So in this case I'll basically do a very simple class, basically setting the size of it, how it's positioned in the page. And then when I'm done I'll do the same thing for a bigger button class, basically using the same preferences but just giving a different height and width. Those are the 90 by 90 ones. And then when I save and I update, we'll actually not find too much apart from the fact that all my assets have been nicely hidden.  The next thing becomes to actually start using some of the classes that we made. First thing would be to add a big play button. We use the module aptly called big play button and edit the liquid, basically the HTML behind the play button itself and we apply the classes that we just added into the CSS file.  You'll also see a bit of extra logic here, that's the liquid part of it, testing whether, for example, the video player is already playing. And finally we get the big play button in the middle of the player and if we mouse over it you'll also see a hover state.  The next step becomes to add a scrubber to, or actually to style the scrubber that's already in the player. So that's pretty logical, that's already kind of the functionality in there, so we get the buffering, we get the track, we get play progress and all that kind of stuff.  And the only thing that's needed from there is basically to modify the CSS that's displayed in the class. So you'll remember from the base core design that we want to have the scrubber in the top of the page or in the top of the player. So we position it absolutely, put it on top left zero. By default it will have a height of five pixels.  We'll actually change that slightly when you mouse over so the scrubber becomes slightly higher when the mouse hovers over the page.  So now the scrubber itself has been positioned nicely in the top of the player. And the next step becomes to align the tracks and the buffer indication and the play indication as we go along. So there are two things here. Obviously we want to change the sizes, but we also want to tweak the colors.  So basically there are three different elements here. The track itself is black with a bit of opacity, the buffer indication is white with a bit of opacity, kind of blending nicely and still allowing us to see the video behind it. And the playhead indicator is obviously going to be a nice green.  So all these changes we can actually update the player and we'll see them pretty nicely as the scrubber is positioned and you can navigate the timeline.  The next step becomes to fix a few of the oddities that still actually shows up on the scrubber timeline. First of all we want to show the time indication not as a part of the scrubber itself, but showing it alongside in the right hand side of the player.  So we want to position the scrubber time element absolutely. We want to position it to the right and by the top, give it a white color and basically make it look nice as a part of the player design that we've set up here.  And when we hover the timeline we want to animate it from an opacity of 0 to an opacity of 1. Similarly we want the thumbnails that are actually part of the experience of kind of mousing over the scrubber. We want them to show up nicely on the players.  And then instead of positioning them from the bottom we'll position them from the top and we'll tweak the design just slightly before updating the player again here. And as we click play we'll see that the time has been positioned nicely and we get some thumbnails looking nice as a part of the player experience.  One thing though to fix as a part of it, we want the time indication to look slightly different. We don't want to show both the current time and the full duration at the same time. Instead we want to write some logic in our smaller liquid file here.  So what we can do is basically say that yeah if there's a scrubber time we want to show that and we want to format that. That's a liquid filter that's built into the player framework. If there's no current time basically meaning that we still haven't loaded the video or the current time is not known yet. We just want to show the duration of the video. Again we want to format that with the same liquid filter that we used before.  After saving and updating those changes show up nicely in the player as well.  So moving on we also want to design a title display for the video. As you'll remember from the design it's just a green box or a few green boxes with a big white title headline. And for that we want to change in the liquid file and we want to make some changes in the JavaScript that renders the liquid template.  In this case you can see that I basically just want to show the title of the video and then go into the info.js file to kind of simplify how we show up info boxes in this case. So there's a property called showDescriptions and there's a getter and a setter for that. That getter and setter we can slightly modify so that every time the showDescriptions pane or property changes we want to re-render the template.  The next thing we want to do is also change some of the behavior around when and how the info display is loaded up. So what the player does is basically allow you to listen to a number of events. So what we want to do here is listen to events such as when the video is playing, when it's being paused, when a new video is loading up with a new title.  We want to callback and in that callback we'll modify slightly and update the showDescriptions property which in turn will render the template. So in this case I want to set the showDescriptions property and I want to set it to either true or false depending on two different things. If the video is paused and if the video is still in its very beginning, if the current time basically is less than one.  In that case we want to have the showDescriptions property be true which will show the title. In all of the cases we'll set it to false which again will just hide the title away.  Finally we want to update some of the styling for the title display. So there's already a base design for the module info but in this case we basically want to start a bit from scratch.  Updating some of the HTML that goes around the title itself and then writing some CSS for it. So the CSS itself is pretty simple. We want to position it absolutely. It's basically in the lower left hand side corner and we want to give it a green background with some white text and the right font.  We want to make it look awesome in the player. And with all of that done we can update the player and see that the title shows up and works just as we expected it to.  The next thing we want to do is set up some player controls. So that's the pause button, the full screen button and a quality switcher in the upper left hand side of the screen.  As you can see you already set up controls in the liquid file when we designed the grid and then in design CSS we can modify the CSS to actually reflect that. So again it's just positioning some control in the right place in the player, floating some of the controls left and designing them slightly in terms of the exact position, the exact display.  And then when we update we can see that the controls are not exactly how we want them but at least they're in the upper left hand side and some of the icons that we defined before have actually started to show up.  To start styling the individual controls we want to find the play button and we want to change that so there's only actually a pause button in here. So when the player is playing we want to show the pause button with all the classes that we defined before.  So that's basically having a pause button and a button in classes and when the player is paused we only want to be showing the big play button instead.  We also only want to show the controls on some specific occasions basically only when the video is playing and only when the mouse is actually over the player item. So we'll basically show and hide depending on where the mouse is and depending on playback.  For that we go into design.js and we hide and we write some simple JavaScript code. So I'll make a function here called toggle controls and we'll call that on some specific occasions.  So by default we'll show the controls here when the player is playing. So I'll listen to the property called playing and if the variable show is true we'll set the opacity to 1 otherwise we'll set it to 0.  And then we'll listen for a number of events. So there are player events. Again those are the ones that we looked at before or at least very similar to them. So when the player starts playing, when it is playing, when it's pausing, when it's loading, when it's ending, that kind of stuff.  We can get a callback and that case will basically say I want to toggle controls that will figure out whether we're playing or not. And then we want to listen to some jQuery events or rather some dumb events. So when the mouse enters the body and when it leaves the body we'll toggle the controls accordingly.  That's pretty simple. We'll update and we'll actually see that on mouse over. Stuff shows up and when the mouse leaves again it's hidden.  So when we started out we forked an existing player that has a slightly different way of choosing qualities than the one that we want in our player here. So how that works by default is basically by setting up a button by default.  So we're going to set up a button with a drop down menu that will allow you to choose between all the qualities that are available. What we want to do instead is have a single display that just displays the current quality. So for example we're playing standard quality or HD quality.  Then whenever that button or text is clicked the quality switches over. So what I'm doing here is modifying the quality button module accordingly. So I'm doing a new setter called shift quality. And that shift quality property or setter is basically toggled or called from within the quality button liquid template.  So in liquid here I'll loop over all the available qualities. And for each of them if that's the one that's the current quality I will show a small piece of text listing just the quality itself. So that might be standard HD, full HD and so on.  And the same element will have a small event handler attached to it. So you can assign event handles with the click property. In this case I want to set the setter shift quality to true which in turn will basically jump onto the next quality here.  So actually not a lot of code to handle something that's slightly complex. But that's only because all the qualities are already available to liquid. All the information about what's currently playing is already available to liquid. And so when we update the player we can basically see this very small change that allows us to switch between standard and HD quality in our example video.  Similarly we want to have a different state whenever the video isn't playing. So we want a new module called paused. So I get a paused system, paused liquid and then paused JS. In this case I've changed it just slightly by actually having the liquid available ahead of time. But this is pretty simple. So it's basically saying that if the current time is more than zero, if we're not playing for example we want to show some simple HTML that links to the current time.  So we want to have links to Twitter, links to Facebook, links to replay. But also that loops related clips and shows some nice HTML to match that. Similarly we basically want to listen to a number of events. Those are the events that we've been listening to before. Play, pause, load, edit, that kind of stuff. And we want to re-render that simple liquid template.  That gives us a really good starting point with some behavior and some HTML for the post-pane. But obviously we want to design that as well by going into design CSS. Finding some of the boilerplate stuff that we cloned from the previous player, deleting that, all the sharing and the browse stuff because we want to overwrite that. And in this case I've again cheated a bit and actually got some copy-pasteable CSS to use. Pretty simple again.  Displace the pane with some shades, display share buttons in the right place and all the recommendations with some absolute positioning of four thumbnails that I want to place in the player. Finally we want to load the module into the player as well and update the player preview.  So this will mean that when we start playing here we actually get a nice pause pane. We can scale that and we can actually see thumbnails clickable and we can navigate the related videos as well.  That's actually a final player design but let's cap off the short walkthrough here by using some animations or adding some animations as well.  So there are two ways of doing animations pretty easily with the TwinFree video players. First you can actually define show and hide animations directly for each module. So those will be basically animated every time a module is either added or hidden entirely.  So that's just a property for each module for show animation and for hide animation. And those you'll be able to add for example animating the opacity over time. So in this case I want to show the paused screen in 600 milliseconds and I want to hide it in 300 milliseconds.  And then when I update accordingly we'll actually see that the paused pane is animated in and it's also animated out when we interact with it.  The second way of doing animations is just as simple. It uses CSS transitions or animations to do the trick. So you may have noticed that every time I've added or used or styled a module or class I've been using opacity 0 and opacity 1 rather than display block or display none.  And that's done for the very simple reason that that allows us to really easy ease in the opacity from 0 to 1 whenever an element is hidden or displayed.  In this case I want to define a simple animation for all the controls for the scrubber for the sections. That's both for height and for opacity actually. And I want to have that basically animate in 300 milliseconds. So every time I hover over something it'll kind of nicely animate in.  So that's it. We've built a full player for 23 video in about 25 minutes or so.  While we've been developing this only a development version has actually been changing. So what happens afterwards is you can build and deploy the project and that will take it live on the site everywhere where the player is used whether that's in the video website design or in an embedded version.  The cool thing about the whole deployment process is that we actually concatenate, we minify and we actually also change some of the graphics in the style sheets to optimize how the player is used in practice. So it means you get a pretty lean, very simple player that also has all the graphics preloaded as you start playback.  So here I can use the player, I can set it as default and as I browse the site I'll also be able to see that my new player is actually live everywhere.  So that's it. That's the very quick intro to how to use 23 video to not only build stunning video websites but also very interactive and very customized players in an easy fashion.  Again the really cool thing about this is that we handle everything behind the scenes. So we handle HTML5 playback, Flash playback. This design actually works on everything from IE7 onwards. It works on mobile devices, tablets and so on as well.  Thank you for watching.