<!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="jquery.strobemediaplayback.js">
</script>
<script type="text/javascript">
$.fn.strobemediaplayback.defaults.swf = "http://localhost/work/smp/trunk/player/StrobeMediaPlayback/bin/StrobeMediaPlayback.swf";
$.fn.strobemediaplayback.defaults.swf = "StrobeMediaPlayback.swf";
var options = {
src: "http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4",
src_ogg: "http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg",
//src: "http://localhost/videos/sintel-1024-stereo.mp4",
//src_ogg: "sintel-1024-stereo.ogv",
width: 480,
height: 362,
//html5: true,
javascriptControls: true,
autoPlay: false,
controlBarMode: "floating",
poster: "images/poster.png",
playButtonOverlay: true,
scaleMode: "zoom",
controlBarAutoHide: true,
controlBarAutoHideTimeout: 3
};
options.id = "strobeMediaPlayback123";
$(function(){
// Get the page query string and retrieve page params
var pageOptions = {}, queryString, questionMarkPosition = window.location.href.indexOf('?');
if (questionMarkPosition > 0) {
queryString = window.location.href.slice(questionMarkPosition + 1);
pageOptions = $.fn.strobemediaplayback.parseQueryString(queryString);
}
options = $.extend({}, options, pageOptions);
// Now we are ready to generate the video tags
var smp = $("#strobemediaplayback-video").strobemediaplayback(options);
});
function onJavaScriptBridgeCreated(id, createBridge){
if (options.javascriptControls) {
$("#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;">
</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"></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;
}
// = $("#"+options.id).data("videoElement")[0];
/*if (video.setMediaResourceURL) {
video = new StrobeMediaPlaybackToHtml5VideoBridge(video);
}*/
video.src = this.href;
video.load();
video.play();
return false;
}
</script>
<h3>MP4 files, for Chrome & Safari</h3>
<a class="mysrc" href="http://localhost/videos/cathy1_SD.mp4">http://localhost/videos/cathy1_SD.mp4</a>
<br/>
<a class="mysrc" href="http://localhost/videos/cathy1_HD.mp4">http://localhost/videos/cathy1_HD.mp4</a>
<br/>
<a class="mysrc" href="http://localhost/videos/cathy2_SD.mp4">http://localhost/videos/cathy2_SD.mp4</a>
<br/>
<a class="mysrc" href="http://localhost/videos/cathy2_HD.mp4">http://localhost/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>
</div>
</html>
