<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Strobe Media Playback</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<link type="text/css" href="strobemediaplayback.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/ParsedQueryString.js"></script>
<script type="text/javascript" src="strobemediaplayback.js"></script>
<script type="text/javascript">
function onJavaScriptBridgeCreated(id)
{
var player = new Player(document.getElementById(id));
org.strobemediaplayback.players[id] =
new org.strobemediaplayback.StrobeMediaPlaybackJSUI(player, $("#" + id + "ControlBar"));
///player.callback = org.strobemediaplayback.players[id];
player.addCallback(org.strobemediaplayback.players[id]);
//org.strobemediaplayback.bindListeners(player, org.strobemediaplayback.players[id], "org.strobemediaplayback.players['" + id + "']");
//org.strobemediaplayback.players[id].cc = new org.strobemediaplayback.InteractiveCC(player, $("#dsCC"), $("#subtext"));
//org.strobemediaplayback.bindListeners(player, org.strobemediaplayback.players[id].cc, "org.strobemediaplayback.players['" + id + "'].cc");
}
$(function()
{
onJavaScriptBridgeCreated("strobeMediaPlayback");
});
var Player = function(video)
{
this.video = video;
//video.__defineSetter__("currentTime", function(val){
// alert(val);
// });
this.state = "ready"
//this.play = this.player.play;
//this.pause = this.player.pause;
//this.prototype = player;
$(video).bind("canplay", this, this.onCanPlay);
$(video).bind("ended", this, this.onCanPlay);
$(video).bind("pause", this, this.onPause);
$(video).bind("play", this, this.onPlay);
$(video).bind("playing", this, this.onPlay);
$(video).bind("durationchange", this, this.onDurationChange);
$(video).bind("timeupdate", this, this.onTimeUpdate);
$(video).bind("volumechange", this, this.onVolumeChange);
}
Player.prototype.addCallback = function(callback)
{
this.callback = callback;
}
Player.prototype.play = function()
{
this.video.play();
}
Player.prototype.pause = function()
{
this.video.pause();
}
Player.prototype.seek = function(value)
{
this.video.currentTime = value;
}
Player.prototype.setVolume = function(value)
{
this.video.volume = value;
}
Player.prototype.setMuted = function(value)
{
this.video.muted = value;
}
Player.prototype.getMuted = function()
{
return this.video.muted;
}
Player.prototype.canSeekTo = function(value)
{
return true;
}
Player.prototype.onVolumeChange = function(event)
{
var player = event.data;
player.callback.onVolumeChange(player.video.volume);
player.callback.onMutedChange(player.video.muted);
}
Player.prototype.onDurationChange = function(event)
{
var player = event.data;
player.callback.onDurationChange(player.video.duration);
}
Player.prototype.onTimeUpdate = function(event)
{
var player = event.data;
player.callback.onCurrentTimeChange(player.video.currentTime);
}
Player.prototype.onCanPlay = function(event)
{
//var player = event.data;
//player.state = "ready";
//player.callback.onMediaPlayerStateChange(player.state);
}
Player.prototype.onPause = function(event)
{
var player = event.data;
player.setState("paused");
player.callback.onMediaPlayerStateChange(player.state);
}
Player.prototype.onPlaying = function(event)
{
var player = event.data;
player.setState("playing");
}
Player.prototype.onPlay = function(event)
{
var player = event.data;
player.setState("playing");
}
Player.prototype.setState = function(value)
{
//alert("Player.prototype.setState="+value+this);
this.state = value;
//state = value;
this.callback.onMediaPlayerStateChange(value);
}
Player.prototype.getState = function()
{
//alert("Player.prototype.getState="+this.state);
//if (this.player.paused == true) return "paused";
//if (this.player.readyState == 3) return "ready";
return this.state;
//return state;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="5">
</table>
<table width="100%" border="0" cellspacing="5">
<tr>
<td width="660">
<video id="strobeMediaPlayback" controls class="smp-video" poster="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.jpg" width="640" height="480">
<source src="http://players.edgesuite.net/videos/big_buck_bunny/bbb.m3u8" type="application/vnd.apple.mpegurl" />
<source src="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4" type="video/mp4" />
<source src="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg" type="video/ogg" />
</video>
<div id="strobeMediaPlaybackControlBar" class="smp-controls">
<div class="smp-top-container ui-widget-header">
<button class="smp-play">play</button>
<span class="smp-volume-control">
<button class="smp-mute">on</button>
<div class="smp-volume" > </div>
</span>
<span class="smp-time">0:00 / 0:00</span>
<span class="smp-mbr">
<button class="smp-mbr-indicator">HD</button>
<div class="smp-mbr-items">
</div>
</span>
</div>
<div class="smp-progress"></div>
</div>
</td>
<td align="left">
</td>
</tr>
</table>
</body>
</html>
