User Tools

Site Tools


quickinstall

Quick Install Guide (from scratch edition)

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).

Preparation

Make sure you uploaded the following files to your site:

  1. projekktor.x.xx.xx.min.js
  2. jquery.min.js
  3. StrobeMediaPlayback.swf
  4. at least one theme directory including a CSS + its image files

jQuery Inclusion

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:

<script type="text/javascript" src="jquery.min.js"></script>

Don´t forget to alter the src as required or desired.

Make sure you include jquery BEFORE you include projekktormin.js

Projekktor Inclusion

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.

<script type="text/javascript" src="projekktor.min.js"></script>
<link rel="stylesheet" href="theme/maccaco/style.css" type="text/css" media="screen" />

Once again, check the paths.

Projekktor Instantiation

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:

  
    <script type="text/javascript">
         $(document).ready(function() {
               projekktor('video');
         })
    </script>

Chaining multiple selectors by separating them with a colon, like e.g. “video,audio” or “div.player,div.second” does not work with IE6,7,8. Single selectors like “audio” or “video” work fine.

The $(document).ready() stuff is provided by jQuery. Code within is executed once the whole page has been loaded and became script-able.

Custom Configuration

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:

  
    <script type="text/javascript">
         $(document).ready(function() {
               projekktor('video');
         })
    </script>

You should know that during instantiation projekktor() also takes a second parameter which represents the mentioned config-mess.

  
    <script type="text/javascript">
         $(document).ready(function() {
               projekktor('video', {
	                /* path to the MP4 Flash-player fallback component */
	                playerFlashMP4:		'http://www.yourdomain.com/StrobeMediaPlayback.swf',
	        
	                /* path to the MP3 Flash-player fallback component */
	                playerFlashMP3:		'http://www.yourdomain.com/StrobeMediaPlayback.swf'         
               });
         }
    </script>

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.

Example

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?

<!DOCTYPE HTML>
<html>
<head>
<title>Projekktor Version 8 Test</title>
<link rel="stylesheet" href="theme/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="jquery.min.js"></script> <!-- Load jquery -->
<script type="text/javascript" src="projekktor.min.js"></script> <!-- load projekktor -->
</head>
<body>


<video id="player_a" class="projekktor" poster="intro.png" title="this is projekktor" width="640" height="360" controls>
    <source src="http://www.projekktor.com/intro.ogv" type="video/ogg" />
    <source src="http://www.projekktor.com/intro.mp4" type="video/mp4" />
</video>


<script type="text/javascript">
$(document).ready(function() {
    projekktor('#player_a', {
	volume: 0.8,
	playerFlashMP4: 'http://www.yourdomain.com/StrobeMediaPlayback.swf',
	playerFlashMP3: 'http://www.yourdomain.com/StrobeMediaPlayback.swf'
    });
});
</script> 


</body>
</html>
quickinstall.txt · Last modified: 2013/12/07 11:13 by operator