16
FEB 2011

Posted by OnSIP Employee at 01:47 PM EST

6474 reads

Share this

How to Customize a Video Player with Flowplayer and YouTube API's

There are many ways of playing video content on your website, the easiest being embedding youtube videos on your website with their copy/paste code. Another way to display a movie is to use Quicktime Player by simply calling a .mov file within HTML code. We chose to use Flowplayer for our video needs.

The Flowplayer API is one of the best out there due to its slick design, appearance customizability, and integration with the jQuery Tools library. In their website, flowplayer.org, they have all the documentation and resources you need to get your video player "Pimped Out." (their words)

After creating a series of videos for our Getting Started Guide, we needed to manage these videos without compromising our server's efficiency. That's when YouTube came to our minds (check out our youtube channel). You can create playlists and select individual videos from a video feed they provide using JSON (JavaScript Object Notation) format, which is the easiest way of delivering structured information between the most commonly used languages on the web.

Specifically, we get our video data by accessing the GDATA link with our user and storing it in our database; this way there's no reason to make a request to YouTube every time someone enters our website. The stored data is used to populate a drop-down list in our Drupal CMS, giving our marketing team the option to select any YouTube channel video to add to a webpage. There's no need to copy and paste embed code. And, the appearance of the video player is already customized and consistent.

Here is a list of some of our Knowledgebase pages using this implementation:

Example Flowplayer

Unfortunately, the YouTube plugin for the Flowplayer is not open source. But, it is a great tool if you are building functionality like ours. Alternately, if you want to play videos in your site without embedding YouTube code or spending money, you should look into JWPlayer; they have basically the same plugins as flowplayer and the YouTube feature already comes with the basic, free version. Although is not as pretty and not as customizable as Flowplayer, it gets the job done and is easier to install on your website.

Example JW Player with Youtube Playlist

This text will be replaced