{"id":236,"date":"2013-04-25T00:00:00","date_gmt":"2013-04-25T04:00:00","guid":{"rendered":"http:\/\/sproutvideo.wpengine.com\/?p=236"},"modified":"2022-10-24T18:30:55","modified_gmt":"2022-10-24T22:30:55","slug":"quick-and-dirty-custom-player-using-jquery-ui","status":"publish","type":"post","link":"https:\/\/sproutvideo.com\/blog\/quick-and-dirty-custom-player-using-jquery-ui.html","title":{"rendered":"Quick and Dirty Custom Video Player Using jQuery UI"},"content":{"rendered":"

Ever wish our player had really customized controls, or a specialized design? Using our Javascript Player API<\/a>, it\u2019s very easy to create your own unique user interface for your videos.<\/p>\n

Here is a quick example using JQuery UI to help demonstrate the possibilities. Before we get started, here is what we\u2019re going to build<\/a>.<\/p>\n

<\/p>\n

Step 1: Set up the embed code<\/h3>\n

The first thing you\u2019ll need to do is set up your embed code so that it hides all of the SproutVideo UI around the player. To do that, open the video in question, navigate to Customizations, and use the “In-Line” option. Under “Pre-Play Settings,” check the box\u00a0“Show Controls,” and under “Visible Player Controls,” check “Hide All Controls.”<\/p>\n

\"\"<\/p>\n

Grab your new embed code by clicking in the “Customized Embed Code” box, or using the “Copy Embed Code” button underneath it.<\/p>\n

Step 2: Setup our dependencies.<\/h3>\n

To easily interact with the SproutVideo API and create our UI, we\u2019ll use JQuery and JQuery UI. This will make building things like our progress bar far easier.<\/p>\n

Add the two libraries to the head of your HTML document, along with the default JQuery UI theme stylesheet. We\u2019re also going to add the excellent Font Awesome web font. This web font has tons of great icons and will make adding things like play, pause, fullscreen and volume buttons a breeze without having to create any images.<\/p>\n

Lastly, we need to add the SproutVideo Javascript API. Here is what our <head><\/code> section looks like now:<\/p>\n

\n
<head><\/span>\n  <script <\/span>type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"https:\/\/code.jquery.com\/jquery-1.9.1.js\"<\/span>><\/script><\/span>\n  <script <\/span>type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"https:\/\/code.jquery.com\/ui\/1.10.2\/jquery-ui.js\"<\/span>><\/script><\/span>\n  <link<\/span> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"https:\/\/code.jquery.com\/ui\/1.10.2\/themes\/smoothness\/jquery-ui.css\"<\/span>><\/span>\n  <link<\/span> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/3.0.2\/css\/font-awesome.min.css\"<\/span>><\/span>\n  <script <\/span>type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"https:\/\/c.sproutvideo.com\/player_api.js\"<\/span>><\/script><\/span>\n<\/head><\/span>\n<\/code><\/pre>\n<\/div>\n
Step 3: Set up UI containers<\/h3>\n
We\u2019re going to create a very basic player in this example and include the following controls:<\/p>\n