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.
<video class="projekktor" poster="intro.png" title="This is Projekktor" width="640" height="385" controls id="player_a">
<source src="http://www.projekktor.com/intro.mp4" type="video/mp4" />
<source src="http://www.projekktor.com/intro.webm" type="video/webm" />
<source src="http://www.projekktor.com/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
*/
$(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,
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" style="width:220px" >
<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" style="width:310px" >
<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" style="width:360px" >
<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>
