You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
217 lines
5.3 KiB
217 lines
5.3 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>dojox.av.FLVideo</title> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
</style> |
|
|
|
<script> |
|
passthrough = function(msg){ |
|
//for catching messages from Flash |
|
if(window.console){ |
|
console.log(msg); |
|
} |
|
} |
|
var djConfig={isDebug:true, parseOnLoad: true, debugAtAllCosts:false}; |
|
</script> |
|
<script type="text/javascript" src="../../../dojo/dojo.js"></script> |
|
<script type="text/javascript"> |
|
dojo.require("dojox.av.FLVideo"); |
|
dojo.require("dojo.parser"); |
|
|
|
var seeking = false; |
|
var prgDim, volDim, progressNode, volumeNode, sliderNode, volsliderNode, durNode,timeNode; |
|
dojo.addOnLoad(function(){ |
|
|
|
progressNode = dojo.byId("progress"); |
|
volumeNode = dojo.byId("volume"); |
|
sliderNode = dojo.byId("slider"); |
|
volsliderNode = dojo.byId("volslider"); |
|
durNode = dojo.byId("dur"); |
|
timeNode = dojo.byId("time"); |
|
|
|
// crossdomain test: |
|
//var url = "http://video.bettervideo.com/video/ClubAJAX/Grog.flv"; |
|
var url = "video/Grog.flv"; |
|
w = new dojox.av.FLVideo({initialVolume:.1, mediaUrl:url, autoPlay:true, isDebug:false}, "vid"); |
|
|
|
toggle = function(){ |
|
if(w.isPlaying){ |
|
w.pause(); |
|
}else{ |
|
w.play(); |
|
} |
|
} |
|
|
|
dojo.connect(w, "onMetaData", function(data){ |
|
durNode.value = data.duration; |
|
}); |
|
|
|
dojo.connect(w, "onSwfSized", function(){ |
|
prgDim = dojo.coords(progressNode); |
|
volDim = dojo.coords(volumeNode); |
|
}); |
|
|
|
dojo.connect(w, "onPosition", function(time){ |
|
setSlider(time); |
|
timeNode.value = time; |
|
}); |
|
|
|
dojo.connect(w, "onLoad", function(){ |
|
prgDim = dojo.coords(progressNode); |
|
}); |
|
// progress silder |
|
var cmove, cup; |
|
setSlider = function(time){ |
|
if(!seeking){ |
|
var dur = durNode.value; |
|
var w = dojo.marginBox(progressNode).w - 12; //slider width * 2 |
|
var p = time/dur; |
|
var x = p*w |
|
if(x){ |
|
dojo.style(sliderNode, "left", x+"px"); |
|
} |
|
|
|
} |
|
}; |
|
|
|
|
|
|
|
dragSlider = function(evt){ |
|
var x = evt.clientX - prgDim.x; |
|
var p = x/prgDim.w; |
|
w.seek( durNode.value * p ); |
|
dojo.style(sliderNode, "left", x+"px"); |
|
} |
|
begSeek = function(){ |
|
seeking = true; |
|
cmove = dojo.connect(dojo.doc, "mousemove", null, "dragSlider"); |
|
cup = dojo.connect(dojo.doc, "mouseup", null, "endSeek"); |
|
} |
|
endSeek = function(){ |
|
seeking = false; |
|
if(cmove) dojo.disconnect(cmove); |
|
if(cup) dojo.disconnect(cup); |
|
} |
|
dojo.connect(progressNode, "mousedown", null, "begSeek"); |
|
|
|
dojo.setSelectable(progressNode, false); |
|
dojo.setSelectable(volumeNode, false); |
|
|
|
|
|
// volume silder |
|
var vmove, vup; |
|
dojo.connect(w, "onLoad", function(){ |
|
volDim = dojo.coords(volumeNode); |
|
var v = w.volume(); // returns 0 - 1 |
|
dojo.style(volsliderNode, "left", volDim.w*v+"px"); |
|
}); |
|
|
|
dragVolume = function(evt){ |
|
var x = evt.clientX - volDim.x; |
|
if(x<0) x = 0; |
|
if(x+6>volDim.w) x = volDim.w-6; |
|
var p = x/volDim.w; |
|
w.volume(p); |
|
dojo.style(volsliderNode, "left", x+"px"); |
|
} |
|
begVolDrag= function(){ |
|
vmove = dojo.connect(dojo.doc, "mousemove", null, "dragVolume"); |
|
} |
|
endVolDrag = function(){ |
|
if(vmove) dojo.disconnect(vmove); |
|
if(vup) dojo.disconnect(vup); |
|
} |
|
dojo.connect(volumeNode, "mousedown", null, "begVolDrag"); |
|
dojo.connect(dojo.doc, "mouseup", function(){ |
|
endVolDrag(); |
|
endSeek(); |
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
</script> |
|
<style> |
|
input{ |
|
width:66px; |
|
} |
|
html, body{ |
|
height:100%; |
|
padding:0; |
|
} |
|
#player{ |
|
width:100%; |
|
height:100%; |
|
border:0; |
|
} |
|
#player td{ |
|
padding:3px; |
|
} |
|
#progress, #volume{ |
|
border:#999999 1px solid; |
|
background:#FFFFFF; |
|
height:10px; |
|
margin:5px 0; |
|
cursor:pointer; |
|
} |
|
#slider, #volslider{ |
|
border:#999999 3px solid; |
|
height:4px; |
|
margin:0; |
|
padding:0; |
|
width:0px; |
|
position:relative; |
|
} |
|
</style> |
|
</head> |
|
<body > |
|
|
|
|
|
<table id="player"> |
|
<tr> |
|
<td><h2>dojox.av.FLVideo</h2> |
|
<p>DojoX Video uses a Deft component to provide the ability to play FLV files. It does not provide any UI controls; |
|
it is comprised mostly of methods and events so that a UI can be built that controls the player. The following test |
|
is kept purposely simple and void of any Dijit widgets. Most of the code in the test is to handle layout and the |
|
sliders. In fact, adding a video is as easy as: <br> |
|
<em>new dojox.av.FLVideo({mediaUrl:"myVideoPath"}, "myAttachNode");</em>.</p> |
|
</td> |
|
<td></td> |
|
</tr> |
|
<tr> |
|
<td colspan="2" style="height:100%;"> |
|
<div id="vid" style="height:100%;"></div> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td style="text-align:left;"><input id="time" type="text" /></td> |
|
<td style="text-align:right;"><input id="dur" type="text" /></td> |
|
</tr> |
|
<tr> |
|
<td colspan="2"> |
|
<div id="progress"><div id="slider"></div></div> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
<button onclick="toggle();">Play/Pause</button> |
|
<button onclick="w.play('video/Grog.flv');">Play Grog</button> |
|
<button onclick="w.play('video/OldMan.flv');">Play Old Man</button> |
|
<button onclick="w.destroy();">Destroy Test</button> |
|
</td> |
|
<td style="text-align:right;"> |
|
<div id="volume"><div id="volslider"></div></div> |
|
</td> |
|
</tr> |
|
</table> |
|
|
|
|
|
|
|
|
|
</body> |
|
</html>
|
|
|