Demo: Javascript

One Video, heaps of Javascript

This page shows some status bulps and links triggering Javascript API methods for your testing pleasure. This example might be somewhat bloated but gives a nice insight into the not so ordinary abilities of the media player and hopfefully the general concept behind.

Projekktor neither uses the pretty nice Video for Everbody (monster-) tag nor any fully featured 3rd party Flash fluff as fallback component. Regardless if a single video or a playlist is played out and regardless if the client browser requires a fall back to Flash the player stays consistent in look and hackability.


  • Client...
  • supports native OGG/THEORA
  • supports native WEBM
  • supports native H.264&MP4
  • supports native MP3
  • supports native OGG/VORBIS
  • has Flash installed
  • is a mobile device
  • scaled video to fit
  • Player Status
  • Mouse hover
  • Is playing
  • Buffer full
  • Flash-Fallback active
  • Player is the coolest ever
  • Current item is the first in schedule
  • Current item is the last in schedule
  • Now playing item of item(s) scheduled
  • Volume is set to
  • Pleayhead is at second
  • Buffered
  • Internal model in use right now:
  • Last keypress fetched:
  • Player-DOM ID attribute:
  • Original media dimensions
  • Player dimensions

The Code

<video class="projekktor" poster="http://www.projekktor.com/wp-content/manual/intro.png" title="This is Projekktor" width="640" height="385" controls id="player_a">
    <source src="http://www.projekktor.com/wp-content/manual/intro.mp4" type="video/mp4" />
    <source src="http://www.projekktor.com/wp-content/manual/intro.webm" type="video/webm" />
    <source src="http://www.projekktor.com/wp-content/manual/intro.ogv" type="video/ogg" />
</video>



<script type="text/javascript">
/*
This script is just an example and included to build up the "demo status panel".
For daily practice installing the player to your site is MUCH simpler and stright forward.
Please take a look at http://www.projekktor.com/docs/quickinstall
*/
jQuery(document).ready(function($) {
    
    // two video items we can dynamically inject for testing purposes:
    var videoOne = { 0:{src: 'http://www.youtube.com/watch?v=emvpc0N0WR4', type: 'video/youtube'} }
    var videoTwo = { 0:{src: 'http://www.youtube.com/watch?v=emvpc0N0WR4', type: 'video/youtube'} }
    
    /*********************************************************************
    Some player event listeners to set general status information:
    *********************************************************************/
    
    // triggered once mouse moves over player instance
    var mouseEnterListener = function() {
    $('#mouseover').addClass('on').removeClass('off');
    }

    // triggered once mouse moves outside player instance
    var mouseLeaveListener = function() {
    $('#mouseover').addClass('off').removeClass('on');
    }
    
    // triggered once player volume has changed
    var volumeListener = function(value) {
    $('#volume').html( Math.round(value*100) + "%" )
    }
    
    // triggered whenever playhead position changes (e.g. during playback)
    var timeListener = function(value) {    
    $('#time').html( value )
    }

    // triggered if the current media has been scaled to fit the player dims
    var scaledListener = function(value) {
    $('#videodims').html( value.realWidth+" x "+value.realHeight )
    $('#playerdims').html( value.displayWidth+" x "+value.displayHeight )    
    $('#isscaled').addClass('on').removeClass('off');
    }

    // triggered whenever user hits a key while player instance has focus
    var keyPressListener = function(value) {
    var result = value;
    switch(value) {
        case 0: result = 'SPACE'; break;
        case 9: result = 'TAB'; break;
        case 13: result = 'ENTER'; break;
        case 37: result = 'ARROW LEFT'; break;
        case 38: result = 'ARROW UP'; break;
        case 39: result = 'ARROW RIGHT'; break;
        case 40: result = 'ARROW DOWN'; break;
        
    }
    $('#key').html( result )
    }    
        
    // triggered during preload promoting 
    var progressListener = function(value) {
    $('#progress').html( Math.round(value) + "%" )
    }
      
    // fired once the player initialized a new item and is ready
    // for action?
    var readyListener = function(value, ref) {
    
    // reset
    $('#isscaled').addClass('off').removeClass('on');
    
    // does it use flash?
    if (ref.getUsesFlash())
        $('#usesflash').addClass('on').removeClass('off');
    else
        $('#usesflash').addClass('off').removeClass('on');
        
    // which model in use?
    $('#model').html( ref.getModel() );
    $('#scheduleditems').html( ref.getItemCount() )
    $('#currentitem').html( ref.getItemIdx()+1 )    
    
    // the current item is the last one?
    if (ref.getIsLastItem())
        $('#islast').addClass('on').removeClass('off');
    else
        $('#islast').addClass('off').removeClass('on');
        
    // or the first one?
    if (ref.getIsFirstItem())
        $('#isfirst').addClass('on').removeClass('off');
    else
        $('#isfirst').addClass('off').removeClass('on');        
    
    }        
    
    var stateListener = function(state) {
    $('#playerstate').html(state);
    switch(state) {
        case 'PLAYING':
        $('#isplaying').addClass('on').removeClass('off');
        break;
        case 'PAUSED':
        case 'STOPPED':
        $('#isplaying').addClass('off').removeClass('on');
        break;
    }
    }
    
    var bufferListener = function(state) {
    switch(state) {
        case 'FULL':
        $('#buffer').addClass('on').removeClass('off');
        break;
        default:
        $('#buffer').addClass('off').removeClass('on');
        break;
    }
    }

    /*********************************************************************
      Configure and instantiate the player and
      apply an "onReady" callback function
    *********************************************************************/    
    var myPlayer = projekktor('video', {
    debug: false,
	playerFlashMP4: 'http://www.projekktor.com/wp-content/manual/jarisplayer.swf',
	playerFlashMP3: 'http://www.projekktor.com/wp-content/manual/jarisplayer.swf',	
    plugin_display: {
           logoImage: "yourlogo.png"
    }
    }, function(player) {
    
    // add listeners
    player.addListener('mouseenter', mouseEnterListener);
    player.addListener('mouseleave', mouseLeaveListener);
    player.addListener('state', stateListener);
    player.addListener('buffer', bufferListener);
    player.addListener('volume', volumeListener);
    player.addListener('time', timeListener);
    player.addListener('progress', progressListener);
    player.addListener('key', keyPressListener);    
    player.addListener('ready', readyListener);
    player.addListener('scaled', scaledListener);
    player.addListener('scheduleModified', readyListener);    
    player.addListener('item', readyListener);

    // initial values:
    $('#volume').html( player.getVolume()*100 + "%" )
    $('#time').html( player.getPosition() )
    $('#progress').html( player.getLoadProgress() + "%" )
    $('#videodims').html( player.getPlayerDimensions().width+"x"+player.getPlayerDimensions().height )
    $('#playerdims').html( player.getMediaDimensions().width+"x"+player.getMediaDimensions().height )
    $('#playerstate').html( player.getState() )    

    // visual environment / media support flags
    if (player.getCanPlayNatively('video/ogg')) $('#nativeogv').addClass('on').removeClass('off');
    if (player.getCanPlayNatively('video/webm')) $('#nativewebm').addClass('on').removeClass('off');
    if (player.getCanPlayNatively('video/mp4')) $('#nativemp4').addClass('on').removeClass('off');
    if (player.getCanPlayNatively('audio/mp3')) $('#nativemp3').addClass('on').removeClass('off');
    if (player.getCanPlayNatively('audio/ogg')) $('#nativeoga').addClass('on').removeClass('off');
    if (player.getIsMobileClient()) $('#ismobile').addClass('on').removeClass('off');
    
    // has flash?
    if ($p.platforms.FLASH()>0) {
        $('#hasflash').addClass('on').removeClass('off');
        $('#flashver').html("V"+$p.platforms.FLASH()+" ");
    }

    // player dom id
    $('#playerid').html(player.getId());

    // Setters: 
    $('#setstop').click(function(){player.setStop(); return false;})
    $('#setstopfull').click(function(){player.setStop(true); return false;})
    $('#setplay').click(function(){player.setPlay(); return false;})
    $('#setpause').click(function(){player.setPause(); return false;})
    $('#setseekplus').click(function(){player.setPlayhead('+5'); return false;})
    $('#setseekminus').click(function(){player.setPlayhead('-5'); return false;})
    $('#setvolumeplus').click(function(){player.setVolume('+5'); return false;})
    $('#setvolumeminus').click(function(){player.setVolume('-5'); return false;})
    $('#setnext').click(function(){player.setActiveItem('next'); return false;})
    $('#setprev').click(function(){player.setActiveItem('previous'); return false;})
    $('#setfullscreen').click(function(){player.setFullscreen(true); return false;})    
    $('#removevideo').click(function(){player.setItem(null); return false;})
    $('#addvideoa').click(function(){player.setItem(videoOne); return false;})
    $('#addvideob').click(function(){player.setItem(videoTwo); return false;})    

    });    
});
</script>
<div id="panel">

    <ul class="info">
    <li><b>Client... </b></li>
    <li> supports native OGG/THEORA <div id="nativeogv" class="bulp off"></div></li>
    <li> supports native WEBM <div id="nativewebm" class="bulp off"></div></li>
    <li> supports native H.264&MP4 <div id="nativemp4" class="bulp off"></div></li>
    <li> supports native MP3  <div id="nativemp3" class="bulp off"></div></li>
    <li> supports native OGG/VORBIS <div id="nativeoga" class="bulp off"></div></li>
    <li> has Flash <span id="flashver"></span>installed <div id="hasflash" class="bulp off"></div></li>
    <li> is a mobile device <div id="ismobile" class="bulp off"></div></li>        
    <li> scaled video to fit <div id="isscaled" class="bulp off"></div></li>      
    </ul>

    <ul class="info" >

    <li><b>Player Status</b></li>
    <li>Mouse hover <div id="mouseover" class="bulp off"></div></li>
    <li>Is playing <div id="isplaying" class="bulp off"></div></li>
    <li>Buffer full <div id="buffer" class="bulp off"></div></li>
    <li>Flash-Fallback active<div id="usesflash" class="bulp off"></div></li>
    <li>Player is the coolest ever<div class="bulp on"></div></li>
    
    <li>Current item is the first in schedule <div id="isfirst" class="bulp off"></div></li>
    <li>Current item is the last in schedule <div id="islast" class="bulp off"></div></li>
    
    <li>Now playing item <span id="currentitem"></span> of <span id="scheduleditems"></span> item(s) scheduled</li>    
    <li>Volume is set to <span id="volume"></span></li>
    <li>Pleayhead is at second <span id="time"></span></li>
    <li>Buffered <span id="progress"></span></li>
    <li>Internal model in use right now: <span id="model"></span></li>
    <li>Last keypress fetched: <span id="key"></span></li>
    <li>Player-DOM ID attribute: <span id="playerid"></span></li>
    <li>Original media dimensions <span id="videodims"></span></li>
    <li>Player dimensions <span id="playerdims"></span></li>        
    </ul>

    <ul class="info" >
    <li><b>Player Setters - General</b></li>

    <li><a href="#" id="setstop">Stop and stay - setStop()</a></li>
    <li><a href="#" id="setstopfull">Stop, go to 1st playlist item - setStop(true)</a></li>    
    <li><a href="#" id="setplay">setPlay()</a></li>
    <li><a href="#" id="setpause">setPause()</a></li>
    <li><a href="#" id="setfullscreen">setFullscreen()</a></li>    
    <li><a href="#" id="setseekplus">Seek +5 secs. - setPlayhead('+5')</a></li>
    <li><a href="#" id="setseekminus">Seek -5 secs. - setPlayhead('-5')</a></li>
    <li><a href="#" id="setvolumeplus">Volume +5% - setVolume('+5')</a></li>
    <li><a href="#" id="setvolumeminus">Volume -5% - setVolume('-5')</a></li>
    
    <li><b>Player Setters - Playlist</b></li>
    <li><a href="#" id="setnext">next item - setActivteItem('next')</a></li>
    <li><a href="#" id="setprev">previous item - setActivteItem('previous')</a></li>
    <li><a href="#" id="addvideoa">Add video (Youtube) - setItem({data})</a></li>
    <li><a href="#" id="addvideob">Add video (Intro,ogg,webm,mp4) - setItem({data})</a></li>
    <li><a href="#" id="removevideo">Remove last item from playlist - setItem(null)</a></li>       
    </ul>

    <div style="clear:both;"></div>
</div>