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)
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:
- Phones, Routers and Devices
- Creating your first users
- Click to Call - Chrome Addition
- Creating an Attendant Menu
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.