Using the Projekktor player in your own projects is extremely easy and straightforward. You have to include two JS-files (Projekktor and jQuery) at least one CSS for the theme and, widdy well, your are ready to go. Once you did that you can morph any <video>, <audio> or block styled DOM element into a Projekktor - even within Internet Explorer (6,7,8).
Make sure you uploaded the following files to your site:
Projekktor uses the jQuery library. If you do not know what jQuery is, feel free to check it out at jquery.com - but it´s not necessary to know it in detail. If you have jQuery already included to your page (which is not unlikely these days) make sure it is at least V1.4.1.
If you have an earlier version of jQuery installed you must update it in order to run Projekktor. You can grab the most recent one from jquery.com or by using the one bundled with the Projekktor distribution package. Usually this will not cause any problems but your should do some testing with other scripts on your site - if any. Btw: Don´t start to install multiple jQuerys of different versions. It isn´t worth the try.
To make jQuery available add the following HTML to your page´s HEAD section:
Don´t forget to alter the src as required or desired.
Add the following HTML to your page´s HEAD section too. This will load the Projekktor itself and a funky theme for its control elements.
Once again, check the paths.
This is where the real fun begins. Depending on you requirements you can morph one, multiple or all media elements on your page into a Projekktor.
If you want to apply the player to all HTML5 media elements on one page add the following to the HEAD section:
The $(document).ready() stuff is provided by jQuery. Code within is executed once the whole page has been loaded and became script-able.
Projekktor supports a big bunch of configuration options. All of them are strictly optional, two of them are most likely to be of interest for your.
First things first. How to apply custom configurations? Well, Projekktor knows two kinds of config parameters: Dynamic and static ones. The dynamic ones can be set per playlist item and will affect the behavior of the player during runtime. Those options are a long story and since this is a beginners guide we will ignore them for now.
“Static” parameters affect the very basic environment. They define paths, toggles if the player should use flash fallback and a lot of other things more. As said above two of them are very likely to require customization and as such they are good examples to show how the static configurations are applied in general. Here we go, back on or example above:
You should know that during instantiation projekktor() also takes a second parameter which represents the mentioned config-mess.
playerFlashMP4 and playerFlashMP3 define the paths to the SWF-components to be used in case of a flash fallback is performed. Depending on your environment it might be necessary to alter them. It´s good practice to set them to full qualified URLs.
This is how it may look like. The following shows a Projekktor to be mounted on a <video> tag with the ID player_a, sets the default volume to 80%, defines custom paths for the flash fallback component and sets a custom logo overlay which is clickable, Sweet, huh?