dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
218 lines (190 loc) • 5.38 kB
HTML
<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>