<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Strobe Player Setup Page</title>
<!-- include the Tools -->
<script src="http://osmf.com/configurator/js/jquery.tools.min.js"></script>
<!--slider-->
<link rel="stylesheet" type="text/css" href="http://osmf.com/configurator/css/skin1.css"/>
<!--tabs-->
<!--tabs-->
<link rel="stylesheet" type="text/css" href="http://osmf.com/configurator/css/tabs.css"/>
<style type="text/css">
<!--
body {
background-image: url(http://osmf.com/configurator/images/background.jpg);
background-repeat: repeat-x;
background-color: #014A75;
font-family: Verdana, Geneva, sans-serif;
color: #333;
}
#wrapper {
margin: 0 auto;
width: 862px;
}
#header {
width: 862px;
float: left;
height: 92px;
margin: 0px 0px 0px 0px;
}
#container {
width: 862px;
float: left;
height: 862px;
margin: 0px 0px 0px 0px;
background-image: url(http://osmf.com/configurator/images/borders.png);
}
#container #contents-left {
width: 435px;
margin: 0px 0px 0px 40px;
float: left;
}
#container #contents-right {
width: 340px;
margin: 30px 0px 0px 5px;
float: left;
height: 500px;
}
#footer {
width: 862px;
float: none;
height: 64px;
margin: 0px 0px 0px 0px;
}
#contents-left div .panes {
background-image: url(http://osmf.com/configurator/images/pane-bg.png);
height: 777px;
}
#pane-titles {
margin: 0px 0px 0px 10px;
font-size: 11px;
font-weight: bold;
}
#tab1-pane {
margin: 0px 10px 10px 10px;
width: 412px;
font-size: 12px;
height: 725px;
padding-top: 10px;
}
#tab1-pane #tab1-pane-sideborder #textfield {
}
#tab1-pane #tab1-pane-topborder {
background-image: url(http://osmf.com/configurator/images/tab1-pane-topborder.png);
height: 16px;
}
#tab1-pane #tab1-pane-sideborder {
background-image: url(http://osmf.com/configurator/images/tab1-pane-sideborder.png);
background-repeat: repeat-y;
padding-left: 15px;
padding-bottom: 5px;
}
#tab1-pane #tab1-pane-bottomborder {
background-image: url(http://osmf.com/configurator/images/tab1-pane-bottomborder.png);
height: 16px;
margin-bottom: 15px;
}
#tab1-pane #tab1-pane-sideborder p {
margin: 0px 0px 5px 0px;
font-size: 11px;
}
#tab1-pane #tab1-pane-sideborder h4 {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
font-size: 11px;
font-weight: bold;
}
#tab2-pane {
margin: 0px 10px 10px 10px;
width: 412px;
font-size: 12px;
height: 725px;
padding-top: 10px;
}
#tab2-pane #tab2-pane-topborder {
background-image: url(http://osmf.com/configurator/images/tab1-pane-topborder.png);
height: 16px;
}
#tab2-pane #tab2-pane-sideborder {
background-image: url(http://osmf.com/configurator/images/tab1-pane-sideborder.png);
background-repeat: repeat-y;
padding-left: 10px;
padding-bottom: 5px;
}
#tab2-pane #tab2-pane-bottomborder {
background-image: url(http://osmf.com/configurator/images/tab1-pane-bottomborder.png);
height: 16px;
margin-bottom: 20px;
}
#tab2-pane #tab2-pane-sideborder p {
margin: 0px 0px 5px 0px;
font-size: 11px;
}
#tab2-pane #tab2-pane-sideborder h4 {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
font-size: 11px;
font-weight: bold;
}
#rightpane {
margin: 10px;
width: 412px;
font-size: 12px;
}
#rightpane-topborder {
background-image: url(http://osmf.com/configurator/images/rightpane-topborder.png);
height: 16px;
}
#rightpane-sideborder {
background-image: url(http://osmf.com/configurator/images/rightpane-sideborder.png);
background-repeat: repeat-y;
padding-left: 10px;
height: 750px;
}
#rightpane-bottomborder {
background-image: url(http://osmf.com/configurator/images/rightpane-bottomborder.png);
height: 16px;
margin-bottom: 0px;
margin-top: 0px;
}
#contents-right #rightpane-sideborder p {
margin: 0px;
}
#player {
margin-bottom: 30px;
}
#swfobjcode {
font-family: monospace;
font-size: 12px;
width: 300px;
height: 200px;
}
#flashvarscode {
height: 75px;
width: 300px;
}
.defaults {
color: #999;
}
.radioBtn {
float: left;
margin: 2px 0px 0px 0px;
padding: 0px;
}
code {
display: block;
width: 460px;
font-family: monospace;
margin: 10px 0 0px 0;
font-size: 12px;
line-height: 14px;
overflow: auto;
background-color: #F5F5F5;
padding: 5px;
border: 1px solid #999;
}
a.button-axn {
/* Sliding right image */
background: transparent url('http://osmf.com/configurator/images/call-to-axn-right.png') no-repeat scroll top right;
display: block;
float: left;
height: 34px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 0px;
padding-right: 10px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
}
a.button-axn span {
/* Background left image */
background: transparent url('http://osmf.com/configurator/images/call-to-axn-left.png') no-repeat;
display: block;
line-height: 20px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding: 7px 5px 7px 10px;
}
a.button-axn:hover span{
text-decoration:none;
color:#ffa304;
}
-->
</style></head>
<body onload="generateCode();">
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header"><img src="http://osmf.com/configurator/images/header.png" width="862" height="92" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="569,43,711,75" href="http://www.osmf.com" target="_blank" />
<area shape="rect" coords="768,25,800,72" href="http://www.adobe.com" target="_self" />
</map>
</div>
<!-- End Header -->
<!-- Begin Content -->
<div id="container">
<div id="contents-left">
<div style="width: 435px;background-repeat:repeat-both;">
<!-- the tabs -->
<ul class="tabs">
<li><a href="#" class="current">Player</a></li>
<li><a href="#" class="">Advanced Options</a></li>
<li><a href="#" class="">Skinning</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<!--Tab 1 Contents-->
<div style="display: block;">
<div id="tab1-pane">
<div id="pane-titles">Basics</div>
<div id="tab1-pane-topborder"></div>
<div id="tab1-pane-sideborder">
<p><acronym title="The location of the swf source">SWF Source <span class="defaults">(URL)</span></acronym>
<input type="text" name="source" id="source" value="http://osmf.org/configurator/StrobeMediaPlayback.swf" size="55"/>
</p>
<p>Video Source <span class="defaults">(URL)</span>
<input type="text" name="src" id="fv_src" value="http://osmf.org/configurator/videos/strobe.flv" size="55"/>
</p>
<p><br />
Dimensions:
</p>
<p>
Width <span class="defaults">(pixels)</span>:
<input name="width" type="text" id="width" size="5" value="317"/>
Height <span class="defaults">(pixels)</span>:
<input name="height" type="text" id="height" size="5" value="250"/>
</p>
<p><br />
Stream Type:
</p>
<p>
<input type="radio" name="streamType" id="fv_streamType" value="" checked="checked" />
Live or recorded
<input type="radio" name="streamType" id="fv_streamType" value="live" />Live
<input type="radio" name="streamType" id="fv_streamType" value="recorded" />Recorded
<input type="radio" name="streamType" id="fv_streamType" value="dvr" />DVR
</p>
<p>Configuration file location:
<input name="configuration" type="text" id="fv_configuration" size="30" />
</p>
<p>Skinning file location:
<input name="skin" type="text" id="fv_skin" size="35" />
</p>
</div>
<div id="tab1-pane-bottomborder"></div>
<div id="pane-titles">Appearance</div>
<div id="tab1-pane-topborder"></div>
<div id="tab1-pane-sideborder">
<p>Scaling Method: </p>
<p>
<input name="scaleMode" type="radio" id="fv_scaleMode" value="" checked="checked"/>
Letterbox
<input type="radio" name="scaleMode" id="fv_scaleMode" value="none" />
None
<input type="radio" name="scaleMode" id="fv_scaleMode" value="stretch" />
Stretch
<input type="radio" name="scaleMode" id="fv_scaleMode" value="zoom" />
Zoom</p>
<p><br />
Control Bar Position:</p>
<p>
<input type="radio" name="controlBarPosition" id="fv_controlBarPosition" value="" checked="checked"/>
Bottom
<input type="radio" name="controlBarPosition" id="fv_controlBarPosition" value="over" />
Over
<input type="radio" name="controlBarPosition" id="fv_controlBarPosition" value="none" />
None</p>
<p>Autohide the control bar?
<input type="radio" name="autoHideControlBar" id="fv_autoHideControlBar" value="" checked="checked" />
Yes
<input type="radio" name="autoHideControlBar" id="fv_autoHideControlBar" value="false" />
No </p>
<p>Background color (hexadecimal):
<input name="backgroundColor" type="text" id="fv_backgroundColor" size="10" class="color {required:false}" />
</p>
<p>Poster frame file location:
<input name="poster" type="text" id="fv_poster" size="30" value=""/>
</p>
<p>Include play button overlay?
<input type="radio" name="playButtonOverlay" id="fv_playButtonOverlay" value="" checked="checked" />
Yes
<input type="radio" name="playButtonOverlay" id="fv_playButtonOverlay" value="false" />
No </p>
<p>Include buffering overlay?
<input type="radio" name="bufferingOverlay" id="fv_bufferingOverlay" value="" checked="checked" />
Yes
<input type="radio" name="bufferingOverlay" id="fv_bufferingOverlay" value="false" />
No </p>
<p>Expose verbose error messages?
<input type="radio" name="verbose" id="fv_verbose" value="" checked="checked" />
Yes
<input type="radio" name="verbose" id="fv_verbose" value="false" />
No </p>
</div>
<div id="tab1-pane-bottomborder"></div>
<div id="pane-titles">Auto Playback</div>
<div id="tab1-pane-topborder"></div>
<div id="tab1-pane-sideborder">
<p>Autoloop content?
<input type="radio" name="loop" id="fv_loop" value="true" />
Yes
<input type="radio" name="loop" id="fv_loop" value="" checked="checked"/>
No</p>
<p>Autoplay content?
<input type="radio" name="autoPlay" id="fv_autoPlay" value="true" />
Yes
<input type="radio" name="autoPlay" id="fv_autoPlay" value="" checked="checked"/>
No</p>
</div>
<div id="tab1-pane-bottomborder"></div>
</div>
</div>
<!--Tab 2 Contents-->
<div style="display: none;">
<div id="tab2-pane">
<div id="pane-titles">Buffering</div>
<div id="tab2-pane-topborder"></div>
<div id="tab2-pane-sideborder">
<p>Allow Buffering optimization?
<input type="radio" name="optimizePlayback" id="fv_optimizePlayback" value="true"/>
Yes
<input type="radio" name="optimizePlayback" id="fv_optimizePlayback" value="false" checked="checked"/>
No
</p>
<p>Initial buffer length <span class="defaults">(seconds)</span>:
<input name="initialBufferTime" type="text" id="fv_initialBufferTime" size="5" /></p>
<p>Maximum buffer length <span class="defaults">(seconds)</span>:
<input type="text" name="expandedBufferTime" id="fv_expandedBufferTime" size="5"/></p>
<p>Minimum length of continuous playback <span class="defaults">(seconds)</span>:
<input type="text" name="minContinuousPlaybackTime" id="fv_minContinuousPlaybackTime" size="5" /></p>
</div>
<div id="tab2-pane-bottomborder"></div>
</div>
<!--div id="pane-titles">Version Control</div>
<div id="tab2-pane-topborder"></div>
<div id="tab2-pane-sideborder">
<p>Target Flash Player Version
<input type="radio" name="fpVersion" id="fv_fpVersion" value="true"/>
10.1
<input type="radio" name="fpVersion" id="fv_fpVersion" value="false" checked="checked"/>
10.0
</p>
<p>Target FlashMediaPlayback Version
<input type="radio" name="fmpVersion" id="fv_fmpVersion" value="true"/>
<br />
Use the latest version - your player will use the link to the latest FlashMediaPlayback version.
Note that we don't promise backwards
<br />
<input type="radio" name="fmpVersion" id="fv_fmpVersion" value="false" checked="checked"/>
<br />
Keep the link to the current (1.0) version even if we release a new version.
</p>
</div>
<div id="tab3-pane-bottomborder"></div>
</div-->
</div>
<!--Tab 3 Contents-->
<div style="display: none; height:500px; "></div>
</div>
</div>
<div style="margin:10px 0px 10px 0px; float:right;"><a style="margin-left:90px;" href="#" target="_self" class="button-axn" onclick="generateCode()"><span>Preview and Update</span></a></div>
</div>
<div id="contents-right">
<div id="rightpane-topborder"></div>
<div id="rightpane-sideborder">
<div id="preview-player">
<div id="preview-player-title"><img src="http://osmf.com/configurator/images/Preview-Player-title.png" width="226" height="40" /></div>
<div id="player"></div>
</div>
<div id="preview-code">
<div id="preview-code-title"><img src="http://osmf.com/configurator/images/Preview-Embed-Code-title.png" width="227" height="41" /></div>
<span id="copytext"><code id="swfobjcode"></code></span>
<textarea id="holdtext" style="display:none;"></textarea>
<h4> Embed variables </h4>
<code id="flashvarscode"></code>
</div>
</div>
<div id="rightpane-bottomborder"></div>
<div style="margin:5px 0px 10px 0px; float:right;"><a style="margin-left:90px;" href="#" target="_self" class="button-axn" onClick="ClipBoard();"><span>Copy Code</span></a></div> </div>
<!--End Content-->
<!--Begin Footer-->
<div id="footer"><img src="http://osmf.com/configurator/images/footer.png" width="862" height="64" /></div>
<!--End Footer-->
</div>
<!-- End Banner -->
</div>
<script>
$(document).ready(function() {
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
// setup for the slider
$(":range").rangeinput();
});
});
</script>
<script type="text/javascript" src="http://osmf.com/configurator/js/jscolor/jscolor.js"></script>
<!-- <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
--> <script type="text/javascript">
//
var swfName='FlashMediaPlayback_1.0.10000_for_fp10.1.swf';
var flashVars = '';
var sourceSwf = '';
var width = '';
var height = '';
var extraVars= 0;
$(window).load(function () {
var loc = location.href;
loc = loc.substring(0, loc.lastIndexOf('/'));
$("#source").val(loc + "/" + swfName);
$("#usePlugin").change(function() {
var outputPluginForm = '';
switch ($("#usePlugin").val()) {
case "ConfigurationEchoPlugin":
outputPluginForm = $("#pluginparams").html();
outputPluginForm += '<hr /> <div id="ConfigurationEchoPlugin">';
outputPluginForm += '<label><acronym title="The location of plugin">plugin_ConfigurationEchoPlugin</acronym></label>';
outputPluginForm += '<input id="fv_plugin_ConfigurationEchoPlugin" name="plugin_ConfigurationEchoPlugin" value="'+ loc +'/ConfigurationEchoPlugin.swf" type="text"/>';
outputPluginForm += '<label><acronym title="Namespace">ConfigurationEchoPlugin_namespace</acronym></label>';
outputPluginForm += '<input id="fv_ConfigurationEchoPlugin_namespace" name="ConfigurationEchoPlugin_namespace" value="http://www.osmf.org/plugin/metadata/1.0" type="text"/>';
outputPluginForm += '<label><acronym title="First test value">ConfigurationEchoPlugin_value1</acronym></label>';
outputPluginForm += '<input id="fv_ConfigurationEchoPlugin_value1" name="ConfigurationEchoPlugin_value1" value="something" type="text"/>';
outputPluginForm += '<label><acronym title="Second test value">ConfigurationEchoPlugin_value2</acronym></label>';
outputPluginForm += '<input id="fv_ConfigurationEchoPlugin_value2" name="ConfigurationEchoPlugin_value2" value="something_else" type="text"/>';
outputPluginForm += '<label><acronym title="Alert">ConfigurationEchoPlugin_alert</acronym></label>';
outputPluginForm += '<input id="fv_ConfigurationEchoPlugin_alert" name="ConfigurationEchoPlugin_alert" value="" type="text"/>';
outputPluginForm += '</div>';
break;
case "other":
outputPluginForm = $("#pluginparams").html();
outputPluginForm += '<hr /><div id="OtherPlugin">';
outputPluginForm += '<label><acronym title="The name of the plugin">Plugin Name</acronym></label>';
outputPluginForm += '<input id="plugin_MyPlugin" name="plugin_ConfigurationEchoPlugin" value="MyPlugin" type="text"/>';
outputPluginForm += '<label><div id="plugin_custom_name"><acronym title="The location of the plugin" id="MyPlugin_name">plugin_MyPlugin</acronym></div></label>';
outputPluginForm += '<input id="fv_plugin_MyPlugin" name="plugin_MyPlugin" value="MyPluginLocation.swf" type="text"/>';
outputPluginForm += '<label><div id="MyPlugin_namespace"><acronym title="Namespace">MyPlugin_namespace</acronym></div></label>';
outputPluginForm += '<input id="fv_MyPlugin_namespace" name="MyPlugin_namespace" value="http://www.osmf.org/plugin/metadata/1.0" type="text"/>';
outputPluginForm += '</div><label id="addNewVariable">Add new Variable<label>';
break;
case "none":
outputPluginForm = '';
break;
default:
outputPluginForm = $("#pluginparams").html();
}
$("#pluginparams").html(outputPluginForm);
$("#plugin_MyPlugin").change(function() {
var newPluginName = $("#plugin_MyPlugin").val();
$("#fv_plugin_MyPlugin").attr('name', 'plugin_' + newPluginName);
$("#plugin_custom_name").html('<acronym title="The location of the plugin" id="MyPlugin_name">'+ 'plugin_' + newPluginName +'</acronym>');
$("#MyPlugin_namespace").html('<acronym title="Namespace">'+newPluginName+'_namespace</acronym></div>');
});
$("#addNewVariable").click(function() {
extraVars++;
var myPluginName = $("#plugin_MyPlugin").val();
var extraVarOutput = '<label><acronym title="The name of the Variable">Variable Name</acronym></label>';
extraVarOutput += '<input id="plugin_MyVariable'+extraVars+'" name="Var_Name'+extraVars+'" value="MyVar'+extraVars+'" type="text"/>';
extraVarOutput += '<label><div id="variable_custom_name_'+extraVars+'"><acronym title="The value of your custom Variable">'+myPluginName+'_MyVar'+extraVars+'</acronym></div></label>';
extraVarOutput += '<input id="fv_MyPlugin_MyVar'+extraVars+'" name="'+myPluginName+'_MyVar'+extraVars+'" value="value'+extraVars+'" type="text"/>';
$("#OtherPlugin").append(extraVarOutput);
$("#plugin_MyVariable"+extraVars).change(function() {
var newVariableName = myPluginName + '_' + $("#plugin_MyVariable"+extraVars).val();
$("#fv_MyPlugin_MyVar"+extraVars).attr('name', newVariableName);
$("#variable_custom_name_"+extraVars).html('<acronym title="The value of your custom Variable">'+newVariableName+'</acronym>');
});
});
});
});
function addPluginVariable(itm) {
alert("muie");
}
function toggleDisplay(itm) {
$("#"+itm).toggle();
}
function generateCode() {
$("#previewLabels").show();
getVars();
embedPlayer();
// generatePreviewCode();
}
function embedPlayer() {
var embedCode = '<object width="' + width + '" height="' + height +'"> ';
embedCode += '<param name="movie" value="'+ sourceSwf + '"></param>';
embedCode += '<param name="flashvars" value="'+ flashVars + '"></param>';
embedCode += '<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>';
embedCode += '<embed src="' + sourceSwf + '" type="application/x-shockwave-flash"';
embedCode += ' allowscriptaccess="always" allowfullscreen="true" ';
embedCode += ' width="' + width + '" height="'+ height +'" ';
embedCode += 'flashvars="' + flashVars + '">';
embedCode += '</embed></object>';
$("#player").html(embedCode);
$("#swfobjcode").text(embedCode);
printFlashVars();
}
function generatePreviewCode() {
var embedCode = '<object width="' + width + '" height="' + height +'"> <br/>';
embedCode += '<param name="movie" value="'+ sourceSwf + '"></param><br/>';
embedCode += '<param name="flashvars" value="'+ flashVars + '"></param><br/>';
embedCode += '<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><br/>';
embedCode += '<embed src="' + sourceSwf + '" type="application/x-shockwave-flash"<br/>';
embedCode += ' allowscriptaccess="always" allowfullscreen="true"<br/> ';
embedCode += ' width="' + width + '" height="'+ height +'"<br/> ';
embedCode += 'flashvars="' + flashVars + '"> <br/>';
embedCode += '</embed></object> <br/>';
$("#swfobjcode").html(embedCode);
}
function getVars() {
flashVars = $("input[value!=],select[value!=]").filter('[id^=fv_]').serialize();
sourceSwf = $("#source").val();
width = $("#width").val();
height = $("#height").val();
}
function goToDebug() {
getVars();
window.location = 'StrobeMediaPlayback.html?width='+ width + '&height=' + height + '&' + flashVars;
}
function printFlashVars() {
var flashVarsArray = $("input[value!=],select[value!=]").filter('[id^=fv_]').serializeArray();
var outputVars = '';
outputVars += 'Source Swf: ' + sourceSwf + ' <br> ';
outputVars += ' width: ' + width + ' height: '+ height +' <br> ';
jQuery.each(flashVarsArray, function(i, flashvar){
outputVars += flashvar.name + ': ' + flashvar.value + ' <br> ';
});
$("#flashvarscode").html(outputVars);
}
function ClipBoard() {
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
}
</script>
</body>
</html>
