<!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="jsdemo.css" rel="stylesheet" />
<script type="text/javascript" src="lib/ParsedQueryString.js"></script>
<script type="text/javascript" src="jsdemo.js"></script>
<script type="text/javascript">
// Collect query parameters in an object that we can
// forward to SWFObject:
var pqs = new ParsedQueryString();
var parameterNames = pqs.params(false);
var parameters =
{ src:"http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m"
, autoPlay: true
, controlBarAutoHide: false
, poster: "images/poster.png"
, javascriptCallbackFunction: "onJavaScriptBridgeCreated"
};
for (var i=0; i<parameterNames.length; i++)
{
var parameterName = parameterNames[i];
parameters[parameterName]
= pqs.param(parameterName)
|| parameters[parameterName];
}
// Embed the player SWF:
swfobject.embedSWF
( "StrobeMediaPlayback.swf"
, "strobeMediaPlayback"
, 640
, 480
, "10.1.0"
, "expressInstall.swf"
, parameters
, { allowFullScreen: "true", wmode: "opaque" }
, { name: "strobeMediaPlayback" }
);
org.strobemediaplayback.InteractiveCC = function(player, captionArea, subtitleArea)
{
this.player = player;
this.captionArea = captionArea;
this.subtitleArea = subtitleArea;
this.oldSelected = null;
this.timer = null;
this.refreshTimer = null;
this.refreshArea = true;
this.bindCaptionArea(this.captionArea);
};
org.strobemediaplayback.prependTimeStamp = function (divId)
{
$(divId).find('p')
.each(
function()
{
$(this).prepend( $(this).attr("begin") + " ");
}
);
};
org.strobemediaplayback.timeToSec = function (t)
{
var s=t.split(':');
return parseInt(s[2],10) + 60.0 * parseInt(s[1],10) + 3600.0* parseInt(s[0],10);
};
org.strobemediaplayback.secondsToHms = function (d)
{
d = Number(d);
var h = Math.floor(d / 3600);
var m = Math.floor(d % 3600 / 60);
var s = Math.floor(d % 3600 % 60);
return ((h < 10 ? "0" : "") + h + ":"+ (m < 10 ? "0" : "") + m + ":"+ (s < 10 ? "0" : "") + s);
};
org.strobemediaplayback.InteractiveCC.prototype =
{
bindCaptionArea: function(newCaptionArea)
{
var oldThis = this;
this.captionArea.unbind();
this.captionArea.find('p')
.each(
function()
{
$(this).unbind();
}
);
this.captionArea = newCaptionArea;
this.captionArea.bind('mouseout', this, this.onExitArea);
this.captionArea.bind('mouseover', this, this.onEnterArea);
this.captionArea.find('p')
.each(
function()
{
$(this).bind('click', oldThis, oldThis.onJump);
$(this).bind('mouseover', oldThis, oldThis.onOver);
$(this).bind('mouseout', oldThis, oldThis.onOut);
}
);
},
getCurrentSub: function(currentPos)
{
var lastSubtitleTime = "";
this.captionArea.find('p')
.each(
function()
{
var subtitleTime = org.strobemediaplayback.timeToSec($(this).attr("begin"));
if (currentPos >= subtitleTime)
{
lastSubtitleTime=$(this).attr("begin");
}
}
);
return lastSubtitleTime;
},
onCurrentTimeChange: function (currentTime, duration)
{
var oldThis= this;
var newSelected = this.getCurrentSub(currentTime);
if (newSelected!=this.oldSelected)
{
clearTimeout(this.timer);
$('p[begin="'+this.oldSelected+'"]', this.captionArea).removeClass('ccc');
this.oldSelected = newSelected;
$('p[begin="'+this.oldSelected+'"]', this.captionArea).addClass('ccc');
var cc = $('p[begin="'+this.oldSelected+'"]', this.captionArea).html();
cc = cc.substring(cc.indexOf(" "));
this.subtitleArea.html(cc);
var subtitleEnd = $('p[begin="'+this.oldSelected+'"]', this.captionArea).attr("end");
var subtitleBegin = $('p[begin="'+this.oldSelected+'"]', this.captionArea).attr("begin");
if (subtitleEnd!=undefined && subtitleEnd != "")
{
this.timer = setTimeout( function()
{
oldThis.subtitleArea.empty();
},
1000.0*(org.strobemediaplayback.timeToSec(subtitleEnd)-currentTime)
);
}
if (this.refreshArea)
{
this.captionArea.scrollTo($('p[begin="'+this.oldSelected+'"]', this.captionArea), {duration: 600, over:{top:-10}} );
}
}
},
////
onJump: function (event)
{
var player = event.data.player;
var jumpPos = $(event.currentTarget).attr("begin");
var subtitleEnd = $(event.currentTarget).attr("end");
var nrSec = org.strobemediaplayback.timeToSec(jumpPos);
if (player.getState() != "ready" && player.canSeekTo(nrSec))
{
clearTimeout(event.data.timer);
$("p[begin='"+jumpPos+"']", event.data.captionArea).addClass('ccc');
if (event.data.oldSelected != "" && event.data.oldSelected != jumpPos)
{
$('p[begin="'+ event.data.oldSelected +'"]', event.data.captionArea).removeClass('ccc');
event.data.subtitleArea.empty();
}
event.data.oldSelected = jumpPos;
var cc = $('p[begin="'+event.data.oldSelected+'"]', event.data.captionArea).html();
cc = cc.substring(cc.indexOf(" "));
event.data.subtitleArea.html(cc);
player.seek(nrSec);
if ( subtitleEnd!=undefined && subtitleEnd != "")
{
event.data.timer = setTimeout( function()
{
event.data.subtitleArea.empty();
},
1000.0 * (org.strobemediaplayback.timeToSec(subtitleEnd) - org.strobemediaplayback.timeToSec(jumpPos))
);
}
}
else
{
return false;
}
//$("#debug2").append("<br />seek=" + nrSec);
},
onOver: function (event)
{
$(event.currentTarget).addClass('hovercc');
},
onOut: function (event)
{
$(event.currentTarget).removeClass('hovercc');
},
onEnterArea: function (event)
{
clearTimeout(event.data.refreshTimer);
event.data.refreshArea = false;
},
onExitArea: function (event)
{
event.data.refreshTimer = setTimeout( function()
{
event.data.refreshArea = true;
},
2000
)
}
}
var player = null;
function onJavaScriptBridgeCreated(id)
{
if (player == null)
{
player = document.getElementById(id);
org.strobemediaplayback.players[id] = new org.strobemediaplayback.StrobeMediaPlaybackJSUI(player, $("#" + id + "ControlBar"));
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");
}
}
</script>
<style type="text/css">
<!--
.Verdana {
font-family: Verdana, Geneva, sans-serif;
}
.ccc
{
color:red;
font-weight:bold;
}
.hovercc
{
background-color: #f0f0f0;
}
.subtext
{
color:lightgrey;
text-align: center;
background-color: black;
top : 500px;
left : 100px;
position: absolute;
width: 450px;
padding: 3px;
z-index:100;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="5">
<tr>
<td width="43"><img src="images/adobe-lq.png" alt="" width="43" height="72" /></td>
<td width="320" class="Verdana">Strobe Media Playback</td>
<td width="262"><img src="images/osmf_horizontal_red.png" width="262" height="57"/></td>
<td width="*"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="5">
<tr>
<td width=660>
<div id="strobeMediaPlayback">
<p>Alternative content</p>
</div>
<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>
<div id="subtext" class="subtext">
</div>
</td>
<td align="left">
<div id="dsCC" style="overflow: auto; width:750px; height:550px; font-size: 1.2em;">
<p begin='00:00:15' end='00:00:18'>At the left we can see...</p>
<p begin='00:00:18' end='00:00:20'>At the right we can see the...</p>
<p begin='00:00:20' end='00:00:22'>...the head-snarlers</p>
<p begin='00:00:22' end='00:00:24'>Everything is safe. Perfectly safe.</p>
<p begin='00:00:24' end='00:00:27'>Emo?</p>
<p begin='00:00:28' end='00:00:30'>Watch out!</p>
<p begin='00:00:47' end='00:00:48'>Are you hurt?</p>
<p begin='00:00:52' end='00:00:54'>I don't think so. You?</p>
<p begin='00:00:55' end='00:00:57'>I'm Ok.</p>
<p begin='00:00:57' end='00:01:01'>Get up. Emo, it's not safe here.</p>
<p begin='00:01:02' end='00:01:03'>Let's go.</p>
<p begin='00:01:03' end='00:01:05'>What's next?</p>
<p begin='00:01:05' end='00:01:09'>You'll see!</p>
<p begin='00:01:12' end='00:01:14'>(howling wind)</p>
<p begin='00:01:16' end='00:01:18'>Emo. This way.</p>
<p begin='00:01:34' end='00:01:35'>Follow me!</p>
<p begin='00:01:39' end='00:01:42'>(buzzing wires and chattery conversations)</p>
<p begin='00:02:11' end='00:02:12'>Hurry Emo!</p>
<p begin='00:02:20' end='00:02:22'>(louder telephone voices)</p>
<p begin='00:02:32' end='00:02:34'>(phone ringing)</p>
<p begin='00:02:48' end='00:02:50'>You're not paying attention!</p>
<p begin='00:02:50' end='00:02:54'>I just want to answer the... ...phone.</p>
<p begin='00:02:55' end='00:02:58'>Emo, look, I mean listen.</p>
<p begin='00:02:59' end='00:03:02'>You have to learn to listen.</p>
<p begin='00:03:03' end='00:03:05'>This is not some game.</p>
<p begin='00:03:05' end='00:03:09'>You, i mean we, we could easily die out here.</p>
<p begin='00:03:10' end='00:03:14'>Listen, listen to the sounds of the machine.</p>
<p begin='00:03:18' end='00:03:20'>Listen to your breathing.</p>
<p begin='00:03:27' end='00:03:29'>(Buzzing wires)</p>
<p begin='00:03:34' end='00:03:36'>(laughing)</p>
<p begin='00:04:13' end='00:04:15'>(oriental dance music)</p>
<p begin='00:04:27' end='00:04:29'>Well, don't you ever get tired of this?</p>
<p begin='00:04:29' end='00:04:31'>Tired?!?</p>
<p begin='00:04:31' end='00:04:34'>Emo, the machine is like clockwork.</p>
<p begin='00:04:35' end='00:04:37'>One move out of place...</p>
<p begin='00:04:37' end='00:04:39'>...and you're ground to a pulp.</p>
<p begin='00:04:41' end='00:04:42'>But isn't it -</p>
<p begin='00:04:42' end='00:04:46'>Pulp, Emo! Is that what you want, pulp?</p>
<p begin='00:04:47' end='00:04:49'>Emo, your goal in life...</p>
<p begin='00:04:50' end='00:04:52'>...pulp?</p>
<p begin='00:05:08' end='00:05:10'>(loud metal sounds)</p>
<p begin='00:05:41' end='00:05:43'>Emo, close your eyes.</p>
<p begin='00:05:44' end='00:05:46'>Why? - Now!</p>
<p begin='00:05:51' end='00:05:52'>Ok.</p>
<p begin='00:05:53' end='00:05:54'>Good.</p>
<p begin='00:05:59' end='00:06:02'>What do you see at your left side, Emo?</p>
<p begin='00:06:04' end='00:06:06'>Nothing. - Really?</p>
<p begin='00:06:06' end='00:06:07'>No, nothing at all.</p>
<p begin='00:06:08' end='00:06:12'>And at your right, what do you see at your right side, Emo?</p>
<p begin='00:06:13' end='00:06:16'>The same Proog, exactly the same...</p>
<p begin='00:06:17' end='00:06:19'>...nothing! - Great.</p>
<p begin='00:06:25' end='00:06:27'>(sound of camera flash)</p>
<p begin='00:06:29' end='00:06:31'>(engine drone)</p>
<p begin='00:06:40' end='00:06:42'>Listen Proog! Do you hear that! (amusement park music)</p>
<p begin='00:06:43' end='00:06:45'>Can we go here?</p>
<p begin='00:06:45' end='00:06:48'>There? It isn't safe, Emo.</p>
<p begin='00:06:49' end='00:06:52'>But... - Trust me, it's not.</p>
<p begin='00:06:53' end='00:06:54'>Maybe I could...</p>
<p begin='00:06:54' end='00:06:56'>No.</p>
<p begin='00:06:57' end='00:07:00'>NO!</p>
<p begin='00:07:00' end='00:07:03'>Any further questions, Emo?</p>
<p begin='00:07:04' end='00:07:05'>No.</p>
<p begin='00:07:09' end='00:07:10'>Emo?</p>
<p begin='00:07:11' end='00:07:13'>Emo, why...</p>
<p begin='00:07:13' end='00:07:14'>Emo...</p>
<p begin='00:07:14' end='00:07:18'>...why can't you see the beauty of this place?</p>
<p begin='00:07:18' end='00:07:20'>The way it works.</p>
<p begin='00:07:20' end='00:07:24'>How perfect it is.</p>
<p begin='00:07:24' end='00:07:27'>No, Proog, I don't see.</p>
<p begin='00:07:27' end='00:07:30'>I don't see because there's nothing there.</p>
<p begin='00:07:31' end='00:07:35'>And why should I trust my life to something that isn't there?</p>
<p begin='00:07:35' end='00:07:37'>Well can you tell me that?</p>
<p begin='00:07:37' end='00:07:39'>Answer me!</p>
<p begin='00:07:43' end='00:07:44'>Proog...</p>
<p begin='00:07:45' end='00:07:47'>...you're a sick man!</p>
<p begin='00:07:47' end='00:07:49'>Stay away from me!</p>
<p begin='00:07:52' end='00:07:55'>No! Emo! It's a trap!</p>
<p begin='00:07:55' end='00:07:57'>Hah, it's a trap.</p>
<p begin='00:07:57' end='00:08:01'>At the left side you can see|the hanging gardens of Babylon!</p>
<p begin='00:08:02' end='00:08:04'>How's that for a trap?</p>
<p begin='00:08:05' end='00:08:07'>No, Emo.</p>
<p begin='00:08:09' end='00:08:12'>At the right side you can see... ...well guess what...</p>
<p begin='00:08:13' end='00:08:14'>...the colossus of Rhodes!</p>
<p begin='00:08:15' end='00:08:16'>No!</p>
<p begin='00:08:16' end='00:08:22'>The colossus of Rhodes and it is here just for you Proog.</p>
<p begin='00:08:51' end='00:08:53'>It is there...</p>
<p begin='00:08:53' end='00:08:56'>I'm telling you, Emo...</p>
<p begin='00:08:57' end='00:09:00'>...it is.</p>
<p begin='00:09:05' end='00:09:07'>(howling wind)</p>
</div>
</td>
</tr>
<tr>
<td>
<style type="text/css">
#demo-frame > div.demo { padding: 10px !important; }
.scroll-pane { overflow: auto; width: 640px; float:left; }
.scroll-content { width: 1350px; float: left; }
.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
.scroll-content-item { display: inline; } /* IE6 float double margin bug */
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; }
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
.smp-playlist-thumbnail { max-width: 80px; max-height: 80px; }
</style>
<script type="text/javascript">
$(function()
{
//scrollpane parts
var scrollPane = $('.scroll-pane');
var scrollContent = $('.scroll-content');
//build slider
var scrollbar = $(".scroll-bar").slider({
slide:function(e, ui){
if( scrollContent.width() > scrollPane.width() ){ scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); }
else { scrollContent.css('margin-left', 0); }
}
});
//append icon to handle
var handleHelper = scrollbar.find('.ui-slider-handle')
.mousedown(function(){
scrollbar.width( handleHelper.width() );
})
.mouseup(function(){
scrollbar.width( '100%' );
})
.append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>')
.wrap('<div class="ui-handle-helper-parent"></div>').parent();
//change overflow to hidden now that slider handles the scrolling
scrollPane.css('overflow','hidden');
//size scrollbar and handle proportionally to scroll distance
function sizeScrollbar(){
var remainder = scrollContent.width() - scrollPane.width();
var proportion = remainder / scrollContent.width();
var handleSize = scrollPane.width() - (proportion * scrollPane.width());
scrollbar.find('.ui-slider-handle').css({
width: handleSize,
'margin-left': -handleSize/2
});
handleHelper.width('').width( scrollbar.width() - handleSize);
}
//reset slider value based on scroll content position
function resetValue(){
var remainder = scrollPane.width() - scrollContent.width();
var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left'));
var percentage = Math.round(leftVal / remainder * 100);
scrollbar.slider("value", percentage);
}
//if the slider is 100% and window gets larger, reveal content
function reflowContent(){
var showing = scrollContent.width() + parseInt( scrollContent.css('margin-left') );
var gap = scrollPane.width() - showing;
if(gap > 0){
scrollContent.css('margin-left', parseInt( scrollContent.css('margin-left') ) + gap);
}
}
//change handle position on window resize
$(window)
.resize(function(){
resetValue();
sizeScrollbar();
reflowContent();
});
//init scrollbar size
setTimeout(sizeScrollbar,10);//safari wants a timeout
});
</script>
<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
<div class="scroll-content">
<script type="text/javascript">
// Construct the HTML required to reload with any of the
// listed media links:
$(function()
{
org.strobemediaplayback.prependTimeStamp("#dsCC");
});
$('#dsCC').show();
var linkingCode = "";
function changeSrc(url)
{
$('.smp-mbr-items').hide();
$('#subtext').hide();
$('#dsCC').hide();
if (url == "http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m")
{
$('#subtext').show();
$('#dsCC').show();
}
org.strobemediaplayback.players.strobeMediaPlayback.player.setMediaResourceURL(
url);
}
var links
= [ "http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m"
, "rtmp://cp67126.edgefcs.net/ondemand/mediapm/osmf/content/test/akamai_10_year_f8_512K"
, "http://mediapm.edgesuite.net/osmf/content/test/manifest-files/progressive.f4m"
, "http://mediapm.edgesuite.net/osmf/content/test/train_1500.mp3"
, "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv"
, "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv"
, "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv"
, "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv"
, "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv"
, "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv"
, "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv"
];
var thumbs
= [ "images/dynstream.png"
, "images/playlist.jpg"
, "images/progressive.png"
, "images/music.jpg"
, "images/tooth.png"
, "images/tooth.png"
, "images/tooth.png"
, "images/tooth.png"
, "images/tooth.png"
, "images/tooth.png"
, "images/tooth.png"
];
for (var i=0; i<links.length; i++)
{
var link = links[i];
var thumb = thumbs[i];
linkingCode = linkingCode
+ '<div class="scroll-content-item ui-widget-header">'
+ '<a href=\'javascript:changeSrc("'
+ encodeURI(link)
+'")\'>'
+ '<img class="smp-playlist-thumbnail" src="'
+ encodeURI(thumb)
+ '"></a>'
+ '</div>';
}
document.write(linkingCode);
</script>
</div>
<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
<div class="scroll-bar"></div>
</div>
</div>
</td>
<td>
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher" ></div>
<script type="text/javascript">
$(
function()
{
$('#switcher').themeswitcher();
}
);
</script>
<div id="debug2" style="height:300px;"></div>
</td>
</tr>
</table>
</body>
</html>
