Skip to content

Commit ec073b3

Browse files
author
Mike Wilcox
committed
DojoX Video demo, using the Deft Video component and DnD video selection
1 parent dc4a55f commit ec073b3

32 files changed

Lines changed: 738 additions & 0 deletions

‎video/README‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
-------------------------------------------------------------------------------
2+
The dojo.workers() Demo
3+
-------------------------------------------------------------------------------
4+
Author: Mike Wilcox (AnM8tR)
5+
-------------------------------------------------------------------------------
6+
Demo description
7+
8+
Demonstrates DojoX's video component, using a SWF created with the
9+
Deft project.
10+
11+
-------------------------------------------------------------------------------
12+
Dependencies:
13+
14+
dojox.av.FLVideo
15+
dijit.form.Button
16+
dijit.form.Slider
17+
dojo.dnd.Source
18+
19+
The FLV videos in the media folder.
20+
21+
-------------------------------------------------------------------------------
22+
Installation instructions
23+
24+
Simply run the included demo.html
25+
26+
To build, use the supplied demo.profile.js as your profileFile,
27+
or run the included buildDemo.sh -- which [should] create an
28+
archive called videoDemo.tar.gz that you [should] be able to drop
29+
on any webserver and view (only optimized, instead)
30+
31+
If there are video errors (Stream Not Found), check that your
32+
server handles the FLV mime type. Also be sure that the media
33+
is accessible by the web ACL (aka, permissions are set).
34+
35+
-------------------------------------------------------------------------------
36+

‎video/SkinOverPlaySeekMute.swf‎

5.73 KB
Binary file not shown.

‎video/buildDemo.sh‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#!/bin/sh
2+
3+
cd ../../util/buildscripts
4+
./build_mini.sh action=release version=1.2.0-alpha profileFile=../../demos/uploader/demo.profile.js
5+
cd ../../release/dojo/
6+
# create an archive file to send somewhere
7+
tar -czvf ../uploaderDemo.tar.gz . --exclude dijit --exclude dojox --exclude util

‎video/demo.css‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
@import "../../dojo/resources/dojo.css";
2+
@import "../../dijit/themes/dijit.css";
3+
@import "../../dijit/themes/tundra/form/Button.css";
4+
@import "../../dijit/tests/css/dijitTests.css";
5+
@import "../../dijit/themes/tundra/tundra.css";
6+
@import "../../dojo/resources/dnd.css";
7+
@import "../../dojo/tests/dnd/dndDefault.css";
8+
.dojoDndContainerOver {
9+
border: 0;
10+
}
11+
#player, #video{
12+
width:320px;
13+
float:left;
14+
}
15+
#video{
16+
height:240px;
17+
}
18+
#vidContainer{
19+
width:320px;
20+
height:240px;
21+
}
22+
#videoOverlay{
23+
position:absolute;
24+
width:320px;
25+
height:240px;
26+
cursor:pointer;
27+
}
28+
#progressContainer{
29+
clear:both;
30+
}
31+
#timeNode, #durNode, #timeNodes{
32+
height:16px;
33+
margin-top:0px;
34+
color:#F5FFC8;
35+
}
36+
#timeNode{
37+
padding-left:2px;
38+
}
39+
#durNode{
40+
padding-right:2px;
41+
}
42+
#timeNodes{
43+
background:#000000;
44+
}
45+
#timeNode, #durNode{
46+
width:150px;
47+
font-family:Verdana, Arial, Helvetica, sans-serif;
48+
font-size:9px;
49+
}
50+
51+
#timeNode{
52+
float:left;
53+
}
54+
#durNode{
55+
float:right;
56+
text-align:right;
57+
}
58+
#playButton, #pauseButton{
59+
}
60+
.playIcon, .pauseIcon{
61+
background-image:url(images/playerIcons);
62+
background-repeat:no-repeat;
63+
background-position:0px 0px;
64+
width:24px;
65+
height:24px;
66+
clear:both;
67+
}
68+
.pauseIcon{
69+
background-position:-24px 0px;
70+
}
71+
/*********** Volume ***********/
72+
#volContainer{
73+
width:60px;
74+
float:right;
75+
position:relative;
76+
top:-30px;
77+
}
78+
#volume{
79+
cursor:pointer;
80+
}
81+
#volMask{
82+
position:absolute;
83+
background:url(images/volMask.png) no-repeat;
84+
width:60px;
85+
height:30px;
86+
}
87+
#volume img, #volume #volBack{
88+
position:absolute;
89+
}
90+
#volBack{
91+
background-image:url(images/volBack.png);
92+
background-repeat:no-repeat;
93+
background-color:#EEEEEE;
94+
width:60px;
95+
height:30px;
96+
background-position:-30px 0px;
97+
}
98+
.volBackHover{
99+
background-image:url(images/volBackOver.png) !important;
100+
}
101+
/*********** Library ***********/
102+
#library{
103+
float:left;
104+
margin-left:30px;
105+
width:220px;
106+
border:#999999 1px solid;
107+
height:250px;
108+
overflow-y:scroll;
109+
}
110+
#libDesc{
111+
float:left;
112+
margin-left:30px;
113+
margin-top:5px;
114+
width:220px;
115+
height:50px;
116+
font-size:12px;
117+
color:#666666;
118+
}
119+
.dojoDndItem, .related{
120+
border:#999999 1px solid;
121+
padding:1px;
122+
margin:2px;
123+
height:60px;
124+
}
125+
.dojoDndItem .thumb,
126+
.related .thumb{
127+
width:80px;
128+
height:60px;
129+
background-repeat:no-repeat;
130+
float:left;
131+
}
132+
.dojoDndItem .title,
133+
.related .title{
134+
float:left;
135+
width:100px;
136+
height:20px;
137+
padding-left:3px;
138+
font-size:12px;
139+
font-weight:bold;
140+
color:#666666;
141+
}
142+
.dojoDndItem .desc,
143+
.related .desc{
144+
float:left;
145+
width:100px;
146+
height:40px;
147+
padding-left:3px;
148+
font-size:9px;
149+
color:#999999;
150+
}
151+
152+
#relatedContainer, #relatedBack{
153+
position:absolute;
154+
width:320px;
155+
height:240px;
156+
opacity:0;
157+
filter:alpha(opacity:0);
158+
}
159+
#relatedContainer .topRow{
160+
text-align:center;
161+
margin-top:20px;
162+
margin-bottom:10px;
163+
}
164+
#relatedContainer .botRow{
165+
text-align:left;
166+
}
167+
#relatedContainer .relText{
168+
font-weight:bold;
169+
color:#CCCCCC;
170+
margin-left:2px;
171+
}
172+
#relatedBack{
173+
background:#000000;
174+
}
175+
.related .title, .related .desc{
176+
width:150px;
177+
}
178+
.related .thumb{
179+
}
180+
.related{
181+
background-color:#FFFFFF;
182+
}
183+
.related:hover{
184+
background:#FFFCE2;
185+
cursor:pointer;
186+
}
187+
.target{
188+
float:left;
189+
display:block;
190+
width:200px;
191+
height:200px;
192+
border:#666666 1px solid;
193+
}
194+
195+
/*********** Timeline ***********/
196+
#BillHappy{
197+
background-image:url(media/thumbs/BillHappy.jpg);
198+
}
199+
#timeline{
200+
border:#999999 1px solid;
201+
height:66px;
202+
clear:both;
203+
width:100%;
204+
}
205+
#timeline .dojoDndItem{
206+
border:0;
207+
width:80px;
208+
float:left;
209+
}
210+
.dojoDndAvatar .desc,
211+
.dojoDndAvatar .title,
212+
#timeline .dojoDndItem .desc,
213+
#timeline .dojoDndItem .title{
214+
display:none;
215+
}

‎video/demo.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2+
"http://www.w3.org/TR/html4/strict.dtd">
3+
<html>
4+
<head>
5+
6+
<title>dojox.av.FLVideo Demo</title>
7+
<link rel="stylesheet" href="demo.css">
8+
9+
<script type="text/javascript" src="../../dojo/dojo.js"
10+
djConfig="isDebug:true, parseOnLoad: true, debugAtAllCosts:false"></script>
11+
12+
<script type="text/javascript" src="src.js"></script>
13+
14+
</head>
15+
<body class="tundra">
16+
<h1>dojox.av.FLVideo Demo</h1>
17+
<div id="player">
18+
<div id="vidContainer">
19+
<div id="video"></div>
20+
<div id="videoOverlay" dojoType="dojo.dnd.Target" jsId="c2" accept="blue,darkred">
21+
<div id="relatedBack" style="display:none;"></div>
22+
<div id="relatedContainer" style="display:none;">
23+
<div class="topRow">
24+
<div dojoType="dijit.form.Button" onClick="controls.doPlay();">Play Again</div>
25+
</div>
26+
<div id="relatedNode" class="botRow">
27+
<span class="relText">Related Items:</span>
28+
<div class="related">
29+
<div class="thumb" style="background-image:url(media/thumbs/Workshop.jpg)"></div>
30+
<div class="title">Workshop</div>
31+
<div class="desc">The elves worked hard</div>
32+
</div>
33+
<div class="related">
34+
<div class="thumb" style="background-image:url(media/thumbs/Teacher.jpg)"></div>
35+
<div class="title">Teacher</div>
36+
<div class="desc">Santa went to classes</div>
37+
</div>
38+
</div>
39+
</div>
40+
41+
</div>
42+
</div>
43+
<div id="timeNodes">
44+
<div id="timeNode">0.00</div>
45+
<div id="durNode">0.00</div>
46+
</div>
47+
<div id="progressContainer">
48+
<div id="progress"
49+
dojoType="dijit.form.HorizontalSlider"
50+
showButtons="false"
51+
intermediateChanges="true"
52+
></div>
53+
</div>
54+
<div onClick="controls.doPlay();"
55+
dojoType="dijit.form.Button"
56+
title="Play"
57+
showLabel="false"
58+
iconClass="playIcon"
59+
id="playButton"
60+
>
61+
Play
62+
</div>
63+
64+
<div onClick="controls.doPause();"
65+
dojoType="dijit.form.Button"
66+
title="Pause"
67+
showLabel="false"
68+
iconClass="pauseIcon"
69+
style="display:none;"
70+
id="pauseButton"
71+
>
72+
Pause
73+
</div>
74+
75+
<div id="volContainer">
76+
<!-- <div id="volume"
77+
dojoType="dijit.form.HorizontalSlider"
78+
showButtons="false"
79+
intermediateChanges="true"
80+
></div>
81+
</div> -->
82+
83+
<div id="volume">
84+
<div id="volBack"></div>
85+
<div id="volMask"></div>
86+
</div>
87+
</div>
88+
</div>
89+
90+
91+
<div id="library" jsId="dnd_library" dojoType="dojo.dnd.Source" class="source" copyOnly="true">
92+
</div>
93+
<div id="libDesc"<em>>To play video from the list, drag and drop one on the player.</em></div>
94+
<!--<div id="timeline" dojoType="dojo.dnd.Source" jsId="c2" class="target" accept="blue,darkred" horizontal="true"></div> -->
95+
96+
97+
</body>
98+
</html>

‎video/demo.profile.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
dependencies = {
2+
layers: [
3+
{
4+
name: "../demos/video/src.js",
5+
resourceName: "demos.video.src",
6+
dependencies: [
7+
"demos.video.src"
8+
]
9+
}
10+
],
11+
12+
prefixes: [
13+
[ "dijit", "../dijit" ],
14+
[ "dojox", "../dojox" ],
15+
[ "demos", "../demos" ]
16+
]
17+
}

‎video/images/blkBk.png‎

126 Bytes
Loading

‎video/images/playerIcons‎

887 Bytes
Binary file not shown.

‎video/images/volBack.png‎

157 Bytes
Loading

‎video/images/volBackOver.png‎

160 Bytes
Loading

0 commit comments

Comments
 (0)