HTML controlbar for Flowplayer based on jQuery UI styles

The question of finding a good flash-player with an HTML interface has occupied and takes many. Only on Habré you can find a lot of articles on a similar topic. It so happened that for my needs I used Flowplayer with the Controlbar plugin from the official site. And yet something was missing ...

Once the decision came - to use the convenience of jQuery UI themes for styling controls. It was obvious that the plug-in would have to write itself. You can see what came out of it under the cut.



The juifp plugin (easy to remember: J query UI F low P layer), when connected to a flowplayer, creates HTML player controls in the specified container.

$f().juifp(container, [options]) //  $f().juifp('div#juifp-container', { height: 30, showMute: false }) 

Thus, the flash element can be hidden and used to control playback of only HTML elements.
When writing a plug-in, I was guided by playing mp3, but it should be noted that everything is true for the video. Is that the fullscreen button to add ...
')
Example view of the player when using the default settings:

Why flowplayer?

The style of the code used by the flowplayer command is in many ways similar to jQuery, which is very convenient for me personally. Also flowplayer is pretty well documented. Well, in general - I stumbled upon it when I found another development for this team - jQuery tools - and I really liked these tools. )

Why jQuery UI?

The jQuery UI team, in my opinion, did a great job creating many great tools and using common themes for them. Considering this, as well as the popularity of jQuery in general, it was decided to base it specifically on jQuery UI themes. Yes, the ability to easily create your own theme, compatible with jQuery UI, also should not be forgotten.

Javascript plugin for flowplayer

I decided not to dwell on writing a javascript plugin. This is a good help on off.site. And then, all this can be seen in my example. (By the way, it should be noted that in general all the information on off.sayte player is quite fully and clearly presented.)

So?

The plugin itself is located in the juifp-1.0.source.js file .

It is best to watch the demo in the FireFox browser, since in this case the jQuery UI ThemeRoller tool will be available. With it, you can immediately evaluate - how a change of topic affects the appearance of the plugin

Working demo here

While everyone is watching, I will give a brief information.

Possible options (in the example below are the default values):

 //  .          // (    ,    play    ) controls: [ 'seek-prev', 'stop', 'play', 'seek-next' ], //    (  title) buttonsTitle: { play: 'Play', stop: 'Stop', pause: 'Pause', prev: 'Prev', next: 'Next', mute: 'Mute', unmute: 'Unmute' }, //   true       ui-corner-all //  false -       roundCorners: true, //     Mute showMute: true, //      showVolumebar: true, //   - (0-100) defaultVolume: 50, //  -  .   - 150 progressbarWidth: 300, //     .   - 50 volumebarWidth: 100, //    .  0 -        elementsMargin: 1, //   .   - 16 height: 26 

Using options you can achieve the look of a plugin from such


before, for example, such



The minimum code to connect the plugin with default values

 $f().juifp(container); 

Where container is the selector for the element in which the plugin should be placed.

Must be kept in mind

1. The Next and Prev buttons do not perform any actions yet. (The thought is already looking further at comfortable playlists ....)

2. It is quite possible there will be a question about the output of the file name inside the player. I hesitated for a long time whether to place the name of the song / file inside the timeline to the left of the timer. After some experiences - I decided not to post. Although the juifp-timeline-text element remains just in case - the way it does not mislead you.

3. Considering that the plugin was originally written for itself - there was no need to use only native javascript for maximum ease of development. Therefore, at the moment the plugin requires connecting jQuery and the following jQuery UI libraries:

• jquery.ui.core
• jquery.ui.widget
• jquery.ui.mouse
• jquery.ui.slider

The need to rewrite everything in pure javascript is considered.

That's all for now. I would welcome any comments.

The latest version of the plugin can always be found here.

Cast:

• jQuery
• jQuery UI
• Flowplayer