User Tools

Site Tools


theming

Projekktor Theming

Preamble

In fact, when ever we talk about “theming” we talk about editing the player´s CSS and optional applying selected configuration options to one or more plugins - e.g. the “controlbar”-plugin.

For your understanding: A bare Projekktor does not require any “theming”. Its not more or less than a <div> container where all the media stuff is injected into. Nevertheless plugins (which are in terms of the MCV-pattern “views”) usually add DOM-containers to the player´s container or somewhere else on the page.

The official packed Projekktor distribution features two built-in plugins: Controlbar and Display. So theming this distributions usually end up a customized CSS file replacing the default “theme/style.css” and sometimes providing custom config parameters for one or both of the mentioned plugins.

Customizing the Controlbar´s Layout

Ok, let´s have a look on the default controlbar template. You can alter it by setting the plugin_controlbar.controlsTemplate config parameters:

<ul class="left"><li><div %{play}></div><div %{pause}></div></li><li><div %{title}></div></li></ul><ul class="right"><li><div %{fsexit}></div><div %{fsenter}></div></li><li><div %{vmax}></div></li><li><div %{vslider}><div %{vmarker}></div><div %{vknob}></div></div></div></li><li><div %{mute}></div></li><li><div %{timeleft}>%{hr_elp}:%{min_elp}:%{sec_elp} | %{hr_dur}:%{min_dur}:%{sec_dur}</div></li><li><div %{next}></div></li><li><div %{prev}></div></li></ul><ul class="bottom"><li><div %{scrubber}><div %{loaded}></div><div %{playhead}></div><div %{scrubberdrag}></div></div></li></ul>

It looks more complex than it actually is. This is because all carriage returns, tabs and so on has been stripped out. Let´s get them back in:

<ul class="left">
   <li><div %{play}></div><div %{pause}></div></li>
   <li><div %{title}></div></li>
</ul>

<ul class="right">
   <li><div %{fsexit}></div><div %{fsenter}></div></li>
   <li><div %{vmax}></div></li>
   <li><div %{vslider}><div %{vmarker}></div><div %{vknob}></div></div></div></li>
   <li><div %{mute}></div></li>
   <li><div %{timeleft}>%{hr_elp}:%{min_elp}:%{sec_elp} | %{hr_dur}:%{min_dur}:%{sec_dur}</div></li>
   <li><div %{next}></div></li>
   <li><div %{prev}></div></li>
</ul>

<ul class="bottom">
  <li><div %{scrubber}><div %{loaded}></div><div %{playhead}></div><div %{scrubberdrag}></div></div></li>
</ul>

Ah, much better. But a little bit cryptic, though. Of course you noted the ”%{}”-tags. And of course they are just place-holders which are overwritten during runtime. Assumed you have a player having the cssClassPrefix set to pp (which is the default) the controlbar plugin would generate the following HTML based on the above template - the timecodes are just examples of course:

<ul class="ppleft">
   <li><div class="ppplay"></div><div class="pppause"></div></li>
   <li><div class="pptitle"></div></li>
</ul>

<ul class="ppright">
   <li><div class="ppfsexit"></div><div class="ppfsenter"></div></li>
   <li><div class="ppvmax"></div></li>
   <li><div class="ppvslider"><div class="ppvmarker"></div><div class="ppvknob"></div></div></div></li>
   <li><div class="ppmute"></div></li>
   <li><div class="pptimeleft">00:30:12 | 00:33:44</div></li>
   <li><div class="ppnext"></div></li>
   <li><div class="ppprev"></div></li>
</ul>

<ul class="ppbottom">
  <li><div class="ppscrubber"><div class="pploaded"></div><div class="ppplayhead"></div><div class="ppscrubberdrag"></div></div></li>
</ul>

Dedicated Tags

The following tags are replaced by class attributes and are bound to specific controlbar functions. Eg.

<div %{play}>PLAY</div>

will become

<div class="ppplay">PLAY</div>

and will be bound to a “click” handler which causes the player to start playback once triggered.

tag var Usage / Description
playhead Area indicating the current playhead position / current timeindex in percent of the total duration - “width”-style is set accordingly.
loaded Area indicating how much of the media file has been loaded in percent - “width”-style is set accordingly.
scrubber Wrapper for the playhead & loaded marker
scrubberdrag A knob which enables “live scrubbing”
play The play-button. Is visible if player is paused, invisible elsewise.
pause The pause-button. Is visible if player is playing, invisible if paused.
stop The stop-button.
prev “Previous” button
next “Next” button
rewind “Rewind” button (-5 secs. scrubbing, decreasing)
Forward “Forward” button (+5 secs. scrubbing, increasing)
fsexit Exit fullscreen button. Is invisible if player is in fullscreen mode.
fsenter Enter fullscreen button. Is invisible if player is NOT in fullscreen mode.
loquality Set the playback quality to an alternate, lower one.
hiquality Sets the playback quality to the highest possible (and configured) one.
vslider Wrapper for the “Volume Marker” vmarker and vknob.
vmarker Area indicating the current volume in percent - “width”-style is set accordinigly.
vknob The knob which can be dragged and dropped by the user in order to set the volume.
mute The mute-button - sets volume to 0 when clicked.
unmute The unmute-button - sets volume to the one prior muting.
vmax The mute-button - sets volume to 100 when clicked.
title Once an item starts playback, the innerHTML of this is filled with the current item´s title.
draghandle If used the whole controlbar can be dragged and drop within boundaries of the media display.
open
close
loopon
loopoff

Timecode Tags

tag var Usage / Description
sec_dur The seconds string of the current media element´s total duration. E.g. if duration is 130 seconds, sec_dur=10, if duration is 60 seconds, sec_dur=00, if duration is 30 seconds, sec_dur=30
min_dur The minutes string of the current media element´s total duration. E.g. if duration is 130 seconds, min_dur=02, if duration is 60 seconds, min_dur=01, if duration is 30 seconds, min_dur=00
hr_dur The hours string of the current media element´s total duration. E.g. if duration is 130 seconds, hr_dur=00, if duration is 3600 seconds, hr_dur=01, if duration is 4000 seconds, hr_dur=01
sec_elp Follows the same scheme like 'sec_dur' but is based on the media time elapsed
min_elp Follows the same scheme like 'min_dur' but is based on the media time elapsed
hr_elp Follows the same scheme like 'hr_dur' but is based on the media time elapsed
sec_rem Follows the same scheme like 'sec_dur' but is based on the media time remaining.
min_rem Follows the same scheme like 'min_dur' but is based on the media time remaining.
hr_rem Follows the same scheme like 'hr_dur' but is based on the media time remaining.

This way you can use a template string like this:

'duration: %{hr_dur}:%{min_dur}:%{sec_dur} | remaining: %{hr_rem}:%{min_rem}:%{sec_rem}'

Assumed you have a media file with a duration of 5.640 seconds (94 minutes), after 228 seconds of playback the above string will end up in this:

'duration: 01:34:00 | remaining: 01:30:12'

Open Tags

All tags which are not recognized as “dedicated”- or “timecode”- tags can be used for what ever you want to. %{myname} will become 'class=“ppmyname”', %{foo} will become 'class=“ppfoo”' and so on. As such you get classes taking the cssClassPrefix-config-option into consideration.

Customizing the CSS

… is easy. As stated above all layout relevant stuff getting to live by a player instance is managed via plugins. Once you know the class-names of plugin-generated containers you can pimp them via CSS. From this point of view the CSS bundled with the official distribution is a CSS designing the output of the “controlbar-” and “display-” plugins.

To simplify things a little all class-names are prefixed with “pp” (which is a short for “Projekktor Player”). This prefix can be reconfigured for each installation but most people use the default “pp” one. Those who don´t should care for the relevant CSS changes for themselves.

Below the classes used in the official distro - without prefix:

classname Description
playhead Area indicating the current playhead position / current timeindex in percent of the total duration - “width”-style is set accordingly.
loaded Area indicating how much of the media file has been loaded in percent - “width”-style is set accordingly.
scrubber Wrapper for the playhead & loaded marker
scrubberdrag A knob which enables “live scrubbing”
play The play-button. Is visible if player is paused, invisible elsewise.
pause The pause-button. Is visible if player is playing, invisible if paused.
prev “Previous” button
fsexit Exit fullscreen button. Is invisible if player is in fullscreen mode.
fsenter Enter fullscreen button. Is invisible if player is NOT in fullscreen mode.
vslider Wrapper for the “Volume Marker” vmarker and vknob.
vmarker Area indicating the current volume in percent - “width”-style is set accordinigly.
vknob The knob which can be dragged and dropped by the user in order to set the volume.
mute The mute-button - sets volume to 0 when clicked.
vmax The mute-button - sets volume to 100 when clicked.
title Once an item starts playback, the innerHTML of this is filled with the current item´s title.
start The startbutton showing up during IDLE
buffering The buffer-indicator

Projekktor-izing Anything

… a very cool but complex feature to be described later.

Share your Work

If you made a theme for your own why not give us a note? We like totally love to see new themes and we would be proud to featured yours in our download section. ZIP all relevant files and post a link to the archive to your forum. Don´t forget to provide your name and URL to your homepage. Please note that we will only re-publish themes which are under GPL.

theming.txt · Last modified: 2012/04/24 09:38 by operator