1 try { |
|
2 var controlbarReady = playerReady; |
|
3 } catch (err){ |
|
4 } |
|
5 |
|
6 playerReady = function(obj) { |
|
7 try { |
|
8 var player = $("#"+obj['id']); |
|
9 player.each(function (){ |
|
10 this.addModelListener("TIME","timeTracker"); |
|
11 this.addModelListener("STATE","playTracker"); |
|
12 this.addControllerListener("MUTE","muteTracker"); |
|
13 this.addControllerListener("VOLUME","volumeTracker"); |
|
14 }); |
|
15 player.addControlbar(); |
|
16 } catch (err){ |
|
17 } |
|
18 try { |
|
19 controlbarReady(obj); |
|
20 } catch (err){ |
|
21 } |
|
22 } |
|
23 |
|
24 jQuery.fn.addControlbar = function (options){ |
|
25 var settings = jQuery.extend({ |
|
26 'width': this.width(), |
|
27 'prefix': 'jw_controlbar', |
|
28 'elements': { |
|
29 'play': { |
|
30 'width': '16px', |
|
31 'height': '16px', |
|
32 'background-image': 'url("http://www.longtailvideo.com/jw/images/controlbar/control_play_blue.png")', |
|
33 'float': 'left', |
|
34 'display': 'block' |
|
35 }, |
|
36 'pause': { |
|
37 'width': '16px', |
|
38 'height': '16px', |
|
39 'background-image': 'url("http://www.longtailvideo.com/jw/images/controlbar/control_pause_blue.png")', |
|
40 'float': 'left', |
|
41 'display': 'none' |
|
42 }, |
|
43 'stop': { |
|
44 'width': '16px', |
|
45 'height': '16px', |
|
46 'background-image': 'url("http://www.longtailvideo.com/jw/images/controlbar/control_stop_blue.png")', |
|
47 'float': 'left', |
|
48 'display': 'block' |
|
49 }, |
|
50 'currenttime': { |
|
51 'width': '12%', |
|
52 'float': 'left', |
|
53 'display': 'block', |
|
54 'text-align': 'right', |
|
55 'font-family': 'monospace', |
|
56 'font-weight': '900', |
|
57 'font-size': '11px' |
|
58 }, |
|
59 'scrubber': { |
|
60 'width': '45%', |
|
61 'float': 'left', |
|
62 'display': 'block', |
|
63 'margin': '5px' |
|
64 }, |
|
65 'totaltime': { |
|
66 'width': '12%', |
|
67 'float': 'left', |
|
68 'display': 'block', |
|
69 'text-align': 'left', |
|
70 'font-family': 'monospace', |
|
71 'font-weight': '900', |
|
72 'font-size': '11px' |
|
73 }, |
|
74 'fullscreen': { |
|
75 'width': '5%', |
|
76 'background-color': 'black', |
|
77 'float': 'left', |
|
78 'display': 'none' |
|
79 }, |
|
80 'mute': { |
|
81 'width': '16px', |
|
82 'height': '16px', |
|
83 'float': 'left', |
|
84 'display': 'block', |
|
85 'background-image': 'url("http://www.longtailvideo.com/jw/images/controlbar/sound_none.png")' |
|
86 }, |
|
87 'unmute': { |
|
88 'width': '16px', |
|
89 'height': '16px', |
|
90 'float': 'left', |
|
91 'display': 'none', |
|
92 'background-image': 'url("http://www.longtailvideo.com/jw/images/controlbar/sound_mute.png")' |
|
93 |
|
94 }, |
|
95 'volume': { |
|
96 'width': '5%', |
|
97 'float': 'left', |
|
98 'display': 'block', |
|
99 'margin': '5px' |
|
100 |
|
101 } |
|
102 } |
|
103 }, options); |
|
104 |
|
105 this.after(buildControlbar(settings)); |
|
106 var player = this[0]; |
|
107 var playerSiblings = this.siblings(); |
|
108 var play = $("."+settings.prefix+".play", playerSiblings); |
|
109 var pause = $("."+settings.prefix+".pause", playerSiblings); |
|
110 var stop = $("."+settings.prefix+".stop", playerSiblings); |
|
111 var scrubber = $("."+settings.prefix+".scrubber", playerSiblings); |
|
112 var currenttime = $("."+settings.prefix+".currenttime", playerSiblings); |
|
113 var totaltime = $("."+settings.prefix+".totaltime", playerSiblings); |
|
114 var fullscreen = $("."+settings.prefix+".fullscreen", playerSiblings); |
|
115 var mute = $("."+settings.prefix+".mute", playerSiblings); |
|
116 var unmute = $("."+settings.prefix+".unmute", playerSiblings); |
|
117 var volume = $("."+settings.prefix+".volume", playerSiblings); |
|
118 |
|
119 play.click(function() { |
|
120 player.sendEvent("PLAY", true); |
|
121 }); |
|
122 |
|
123 |
|
124 pause.click(function() { |
|
125 player.sendEvent("PLAY", false); |
|
126 }); |
|
127 |
|
128 stop.click(function() { |
|
129 player.sendEvent("STOP"); |
|
130 }); |
|
131 |
|
132 currenttime.html("00:00"); |
|
133 |
|
134 scrubber.slider({ |
|
135 range: "min", |
|
136 min: 0, |
|
137 max: 100000, |
|
138 slide: function(event, ui) { |
|
139 var duration = player.getPlaylist()[player.getConfig()['item']].duration; |
|
140 var seekTime = Math.round(duration * ui.value / 100000); |
|
141 player.sendEvent("SEEK", seekTime); |
|
142 } |
|
143 }); |
|
144 |
|
145 totaltime.html("00:00"); |
|
146 |
|
147 fullscreen.click(function() { |
|
148 player.sendEvent("FULLSCREEN", true); |
|
149 }); |
|
150 |
|
151 mute.click(function() { |
|
152 player.sendEvent("MUTE", true); |
|
153 }); |
|
154 |
|
155 unmute.click(function() { |
|
156 player.sendEvent("MUTE", false); |
|
157 }); |
|
158 |
|
159 volume.slider({ |
|
160 range: "min", |
|
161 min: 0, |
|
162 max: 100, |
|
163 value: player.getConfig()['volume'], |
|
164 slide: function(event, ui) { |
|
165 player.sendEvent("VOLUME", ui.value); |
|
166 } |
|
167 }); |
|
168 } |
|
169 |
|
170 function buildControlbar(settings){ |
|
171 var result = ""; |
|
172 result += "<div class='"+settings.prefix+"' style='width:"+settings.width+"px'>"; |
|
173 for (element in settings.elements){ |
|
174 var style = ""; |
|
175 for (styleElement in settings.elements[element]){ |
|
176 style += styleElement+":"+settings.elements[element][styleElement]+";"; |
|
177 } |
|
178 result += "<div class='"+settings.prefix+" "+element+"' style='"+style+"'> </div>"; |
|
179 } |
|
180 result += "</div>"; |
|
181 return result; |
|
182 } |
|
183 |
|
184 function pad(s,l) { |
|
185 return( l.substr(0, (l.length-s.length) )+s ); |
|
186 } |
|
187 |
|
188 function formatTime(seconds){ |
|
189 var result = ""; |
|
190 var remaining = Math.floor(seconds); |
|
191 |
|
192 if (seconds > 3600){ |
|
193 result += pad((Math.floor(remaining/3600)).toString(),"00")+":"; |
|
194 remaining = remaining % 3600; |
|
195 } |
|
196 |
|
197 result += pad((Math.floor(remaining/60)).toString(),"00")+":"; |
|
198 remaining = remaining % 60; |
|
199 |
|
200 result += pad(remaining.toString(),"00")+""; |
|
201 |
|
202 return result; |
|
203 } |
|
204 |
|
205 function play(player){ |
|
206 player.sendEvent("PLAY"); |
|
207 return false; |
|
208 } |
|
209 |
|
210 function stop(player){ |
|
211 player.sendEvent("STOP"); |
|
212 return false; |
|
213 } |
|
214 |
|
215 function seek(player){ |
|
216 player.sendEvent("STOP"); |
|
217 return false; |
|
218 } |
|
219 |
|
220 function timeTracker(obj){ |
|
221 var percentComplete = Math.round(100000 * obj.position / obj.duration); |
|
222 var player = $("#"+obj['id']); |
|
223 var playerSiblings = player.siblings(); |
|
224 $(".jw_controlbar.scrubber", playerSiblings).slider('option', 'value', percentComplete); |
|
225 $(".jw_controlbar.currenttime", playerSiblings).html(formatTime(obj.position)); |
|
226 $(".jw_controlbar.totaltime", playerSiblings).html(formatTime(obj.duration)); |
|
227 } |
|
228 |
|
229 function playTracker(obj){ |
|
230 var player = $("#"+obj['id']); |
|
231 var playerSiblings = player.siblings(); |
|
232 if (obj.newstate == "PLAYING"){ |
|
233 $(".jw_controlbar.pause", playerSiblings).css("display","block"); |
|
234 $(".jw_controlbar.play", playerSiblings).css("display","none"); |
|
235 } else { |
|
236 $(".jw_controlbar.pause", playerSiblings).css("display","none"); |
|
237 $(".jw_controlbar.play", playerSiblings).css("display","block"); |
|
238 } |
|
239 } |
|
240 |
|
241 function muteTracker(obj){ |
|
242 var player = $("#"+obj['id']); |
|
243 var playerSiblings = player.siblings(); |
|
244 if (!obj.state){ |
|
245 $(".jw_controlbar.mute", playerSiblings).css("display","block"); |
|
246 $(".jw_controlbar.unmute", playerSiblings).css("display","none"); |
|
247 setVolume($(".jw_controlbar.volume", playerSiblings), player[0].getConfig()['volume']); |
|
248 } else { |
|
249 $(".jw_controlbar.mute", playerSiblings).css("display","none"); |
|
250 $(".jw_controlbar.unmute", playerSiblings).css("display","block"); |
|
251 setVolume($(".jw_controlbar.volume", playerSiblings), 0); |
|
252 } |
|
253 } |
|
254 |
|
255 function volumeTracker(obj){ |
|
256 var player = $("#"+obj['id']); |
|
257 var playerSiblings = player.siblings(); |
|
258 setVolume($(".jw_controlbar.volume", playerSiblings),obj.percentage); |
|
259 } |
|
260 |
|
261 function setVolume(slider, value){ |
|
262 slider.slider('option', 'value', value); |
|
263 } |
|