218 lines
5.5 KiB
HTML
218 lines
5.5 KiB
HTML
<!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>
|