<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Flash/Strobe Media Playback</title>
<style type="text/css">
body {
font: 12px Arial, sans-serif;
background-color: #000000;
color: #FFFFFF;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
</style>
<link type="text/css" href="jquery.strobemediaplayback.css" rel="stylesheet" />
<script type="text/javascript" src="lib/jquery/jquery-1.4.2.js">
</script>
<script type="text/javascript" src="lib/swfobject.js">
</script>
<script type="text/javascript" src="jquery.strobemediaplayback.js">
</script>
<script type="text/javascript">
$.fn.strobemediaplayback.defaults.swf = "StrobeMediaPlayback.swf";
//$.fn.strobemediaplayback.defaults.swf = "http://127.0.0.1:8000/smp/StrobeMediaPlayback/bin/StrobeMediaPlayback.swf";
$.fn.adaptiveexperienceconfigurator.rules.push(// flash10_0
function(context, options){
if (context.flashPlayerVersion.major == 10 && context.flashPlayerVersion.minor == 0) {
context.setOption(options, "src", "http://osmf.org/dev/videos/cathy2_HD.mp4");
}
}, // android Tablet or Phone
function(context, options){
if (context.isAndroid && (context.isTablet || context.isPhone)) {
context.setOption(options, "src", "http://osmf.org/dev/videos/cathy2_SD.mp4");
}
}, // is Firefox
function(context, options){
context.isFirefox = context.userAgent.match(/Firefox/i) != null;
if (context.isFirefox && options.html5) {
context.setOption(options, "src", "http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg");
}
else {
context.setOption(options, "src", "http://osmf.org/dev/videos/cathy2_HD.mp4");
}
}, // is iOS
function(context, options){
if (context.isiPad || context.isiPhone) {
context.setOption(options, "src", "http://osmf.org/dev/videos/cathy1_SD.mp4");
}
});
var options = {
src: "http://osmf.org/dev/videos/cathy1_HD.mp4",
width: 480,
height: 362,
javascriptControls: true,
autoPlay: false,
controlBarMode: "floating",
poster: "images/poster.png",
playButtonOverlay: true,
loop: true
};
options.id = "strobeMediaPlaybackId";
$(function(){
// Get the page query string and retrieve page params
var pageOptions = {}, queryString = window.location.search;
if (queryString) {
queryString = queryString.substring(1);
pageOptions = $.fn.strobemediaplayback.parseQueryString(queryString);
}
options = $.extend({}, options, pageOptions);
options = $.fn.adaptiveexperienceconfigurator.adapt(options);
if (!options.javascriptControls) {
$(".strobeMediaPlaybackControlBar,.smp-error,.playoverlay").hide();
}
// Now we are ready to generate the video tags
var smp = $("#strobemediaplayback-video").strobemediaplayback(options);
});
function onJavaScriptBridgeCreated(id){
$("#strobemediaplayback").strobemediaplaybackchrome(options);
}
</script>
</head>
<body>
<div style="padding:100px;background-color:#777777">
<div iv id="html5MediaPlayback" style="width:480px; height:362px;background-color:#777777;">
<div id="strobemediaplayback" style="width:480px; height:362px;background-color:#777777;">
<div id="strobemediaplayback-video" style="width:480px; height:362px;background-color:#777777;">
Alternative Content
</div>
<a class="smp playoverlay"></a>
<span class="smp-error"></span>
<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" title="not implemented yet"></a-->
<a class="smp volume high"></a>
<div class="time">
<span class="currentTime">0:00</span> / <span class="duration">0:00</span>
</div>
</div>
</div>
</div>
</div>
<div id="seekDebug" style="color:#FFFFFF;">
...
</div>
<div id="debug" style="color:#FFFFFF;">
...
</div>
</body>
<div>
<script type="text/javascript">
$(function(){
$(".mysrc").bind("click", updateSrc);
});
function updateSrc(event){
var video;
video = $("#" + options.id)[0];
if (org.strobemediaplayback.proxied[options.id]) {
video = (org.strobemediaplayback.proxied[options.id]).videoElement;
}
video.src = this.href;
video.load();
video.play();
return false;
}
</script>
<h3>MP4 files, for Chrome & Safari</h3>
<a class="mysrc" href="http://osmf.org/dev/videos/cathy1_SD.mp4">http://osmf.org/dev/videos/cathy1_SD.mp4</a>
<br/>
<a class="mysrc" href="http://osmf.org/dev/videos/cathy1_HD.mp4">http://osmf.org/dev/videos/cathy1_HD.mp4</a>
<br/>
<a class="mysrc" href="http://osmf.org/dev/videos/cathy2_SD.mp4">http://osmf.org/dev/videos/cathy2_SD.mp4</a>
<br/>
<a class="mysrc" href="http://osmf.org/dev/videos/cathy2_HD.mp4">http://osmf.org/dev/videos/cathy2_HD.mp4</a>
<br/>
<a class="mysrc" href="http://media.w3.org/2010/05/sintel/trailer.mp4">http://media.w3.org/2010/05/sintel/trailer.mp4</a>
<br/>
<a class="mysrc" href="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4">http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4</a>
<h3>OGG files, for Firefox HTML5 only</h3>
<a class="mysrc" href="http://media.w3.org/2010/05/sintel/trailer.ogv">http://media.w3.org/2010/05/sintel/trailer.ogv</a>
<br/>
<a class="mysrc" href="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg">http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg</a>
<br/>
<!--a class="mysrc" href="http://osmf.org/dev/videos/cathy1.ogv">http://osmf.org/dev/videos/cathy1.ogv</a>
<br/>
<a class="mysrc" href="http://osmf.org/dev/videos/cathy2.ogv">http://osmf.org/dev/videos/cathy2.ogv</a-->
</div>
</html>
