<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Template Generator</title>
<script type="text/javascript" src="lib/jquery/jquery-1.4.2.js">
</script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">
</script>
</head>
<body>
<h1>Flash/Strobe Media Playback - iframe embed sample</h1>
<script id="template5" type="text/x-jquery-tmpl">
{{if html5}}
<div class="strobeMediaPlaybackContainer">
<video id="${id}" class="smp_video"
{{if poster}}
poster="${poster}"
{{/if}}
{{if html5customChrome === false}}
controls="controls"
{{/if}}
height="${height}" width="${width}">
<source src="${src}" type="video/mp4" />{{if src_ogg}}<source src="${src_ogg}" type="video/ogg" />{{/if}}
</video>{{if html5customChrome}}
{{/if}}
</div>{{else}}
<object width="${width}" height="${height}" id="${id}">
<param name="movie" value="${swf}">
</param><param name="flashvars" value="${queryString}">
</param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><param name="wmode" value="opaque">
</param>
<embed id="${id}" src="${swf}" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" width="${width}" height="${height}" flashvars="${queryString}">
</embed>
</object>
{{/if}}
</script>
<script id="template2" type="text/x-jquery-tmpl">
{{if html5}}
<div class="strobeMediaPlaybackContainer">
<video id="${id}" class="smp_video"
{{if poster}}
poster="${poster}"
{{/if}}
{{if html5customChrome === false}}
controls="controls"
{{/if}}
height="${height}" width="${width}">
<source src="${src}" type="video/mp4" />{{if src_ogg}}<source src="${src_ogg}" type="video/ogg" />{{/if}}
</video>{{if html5customChrome}}
{{/if}}
</div>{{else}}
<object width="${width}" height="${height}" id="${id}" name="${id}">
<param name="movie" value="${swf}">
</param><param name="flashvars" value="${queryString}">
</param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><param name="wmode" value="opaque">
</param>
<embed id="${id}" src="${swf}" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" width="${width}" height="${height}" flashvars="${queryString}">
</embed>
</object>
{{/if}}
</script>
<script id="template" type="text/x-jquery-tmpl">
{{if html5}}
<video id="${id}" class="smp_video"
{{if poster}}
poster="${poster}"
{{/if}}
{{if controlBarMode && controlBarMode != "none"}}
controls="controls"
{{/if}}
height="${height}" width="${width}">
<source src="${src}" type="video/mp4" /> {{if src_ogg}}<source src="${src_ogg}" type="video/ogg" />{{/if}}
</video>{{else}}
{{if swf}}
<object id="${id}" name="${id}" data="${swf}" width="${width}" height="${height}" type="application/x-shockwave-flash">
<param name="movie" value="${swf}" /><param name="flashvars" value="${queryString}" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="wmode" value="opaque" />
</object>{{else}}
<object id="${id}" name="${id}" width="${width}" height="${height}" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="${swf}" /><param name="flashvars" value="${queryString}" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="wmode" value="opaque" />
</object>{{/if}}
{{/if}}
</script>
<script id="embedCode" type="text/x-jquery-tmpl">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}">
<param name="movie" value="${swf} />
<param name="flashvars" value="${queryString}" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="${swf}" width="${width}" height="${height}">
<param name="flashvars" value="movie=${src}" />
<object type="video/mp4" data="${poster}" width="${width}" height="${height}">
<param name="controller" value="false" /><param name="src" value="${poster}" /><param name="href" value="${src}" /><param name="target" value="myself" />
<!--<![endif]--><img src="${poster}" alt="" />
<!--[if !IE]>-->
</object>
</object>
<!--<![endif]-->
</object>
</script>
<script id="strobeMediaPlaybackChromeTemplate" type="text/x-jquery-tmpl">
<a class="smp playoverlay"></a>
<div class="strobeMediaPlaybackControlBar">
<a class="smp play"></a>
<div class="video-progress2">
<a class="slider"></a>
<div class="video-track">
<div class="played">
</div>
<div class="buffered">
</div>
</div>
</div>
<a class="smp fullscreen"></a>
<a class="smp volume high"></a>
<div class="time">
<span class="currentTime">0:00</span>/<span class="duration">0:00</span>
</div>
</div>
</script>
<br/>
<textarea id="function" cols="200" rows="30">
</textarea>
<script type="text/javascript">
$(function(){
// var myTemplate = $.template("template", $("#template"));
//var myTemplate = $.template("myTemplate", $("#template"));
var myTemplate = $.template("myTemplate", $("#strobeMediaPlaybackChromeTemplate"));
//$el.append(myTemplate+"");
var templateString = myTemplate + "";
//templateString.replace(/\s+/," ");
//1 templateString.replace(/\<\s+\>/,"");
templateString = templateString.replace("function anonymous(jQuery, \$item)", "function videoTemplate(jQuery, \$item)");
//alert(templateString);
// /function anonymous(jQuery, $item)
$("#function").val(templateString);
});
</script>
</body>
</html>
