1 | /*!
|
---|
2 | * Replayme Player v1.0.1
|
---|
3 | * Based on JQueryUI v1.8.4
|
---|
4 | *
|
---|
5 | *
|
---|
6 | * Copyright 2010, Maxime Rouast
|
---|
7 | * Released under the GPL 2 License.
|
---|
8 | *
|
---|
9 | */
|
---|
10 |
|
---|
11 |
|
---|
12 | var relPosTimer_is_on=0;
|
---|
13 | var relpos;
|
---|
14 | var user_is_dragging=0;
|
---|
15 | var checkStatusTimer;
|
---|
16 | var checkVideoSizeTimer;
|
---|
17 | var previousHeight=0;
|
---|
18 | var previousWidth=0;
|
---|
19 | var vlc;
|
---|
20 |
|
---|
21 |
|
---|
22 | //Used for the look and feel of the player
|
---|
23 | function checkStatus()
|
---|
24 | {
|
---|
25 |
|
---|
26 | if(vlc.subtitle.count < 1)
|
---|
27 | {
|
---|
28 | $( "#subtitles" ).button( "option", "disabled", true );
|
---|
29 | }
|
---|
30 | else if (vlc.subtitle.count > 0)
|
---|
31 | {
|
---|
32 | $( "#subtitles" ).button( "option", "disabled", false );
|
---|
33 | }
|
---|
34 |
|
---|
35 | if (vlc.input.state == 0) {
|
---|
36 | // current media has stopped
|
---|
37 | //onStop();
|
---|
38 | }
|
---|
39 | else if (vlc.input.state == 1) {
|
---|
40 | // current media is connecting
|
---|
41 | onOpening();
|
---|
42 | }
|
---|
43 | else if (vlc.input.state == 2) {
|
---|
44 | // current media is buffering data
|
---|
45 | onBuffering();
|
---|
46 | }
|
---|
47 | else if (vlc.input.state == 3) {
|
---|
48 | // current media is now playing
|
---|
49 | onPlaying();
|
---|
50 | }
|
---|
51 | else if (vlc.input.state == 4) {
|
---|
52 | // current media is now paused
|
---|
53 | //onPaused();
|
---|
54 | }
|
---|
55 | else if (vlc.input.state == 5) {
|
---|
56 | // current media is stopping
|
---|
57 | //onStopping();
|
---|
58 | }
|
---|
59 | else if (vlc.input.state == 6) {
|
---|
60 | // current media has finished playback
|
---|
61 | onEnd();
|
---|
62 | }
|
---|
63 |
|
---|
64 | checkStatusTimer=setTimeout(function(){checkStatus()},1000);
|
---|
65 | };
|
---|
66 |
|
---|
67 | function onOpening()
|
---|
68 | {
|
---|
69 | $('#play').button('option', {
|
---|
70 | label: 'pause',
|
---|
71 | icons: {
|
---|
72 | primary: 'ui-icon-pause'
|
---|
73 | }
|
---|
74 | });
|
---|
75 | document.getElementById("status").innerHTML = " <img src='" + bufferImgURL + "'> Connecting...";
|
---|
76 | }
|
---|
77 |
|
---|
78 | function onBuffering()
|
---|
79 | {
|
---|
80 | $('#play').button('option', {
|
---|
81 | label: 'pause',
|
---|
82 | icons: {
|
---|
83 | primary: 'ui-icon-pause'
|
---|
84 | }
|
---|
85 | });
|
---|
86 | document.getElementById("status").innerHTML = " <img src='" + bufferImgURL + "'> Buffering...";
|
---|
87 | }
|
---|
88 |
|
---|
89 | function onPlaying()
|
---|
90 | {
|
---|
91 | $('#play').button('option', {
|
---|
92 | label: 'pause',
|
---|
93 | icons: {
|
---|
94 | primary: 'ui-icon-pause'
|
---|
95 | }
|
---|
96 | });
|
---|
97 | document.getElementById("status").innerHTML = "";
|
---|
98 | }
|
---|
99 |
|
---|
100 | function onEnd()
|
---|
101 | {
|
---|
102 | stop();
|
---|
103 | $('#play').button('option', {
|
---|
104 | label: 'play',
|
---|
105 | icons: {
|
---|
106 | primary: 'ui-icon-play'
|
---|
107 | }
|
---|
108 | });
|
---|
109 | $( "#subtitles" ).button( "option", "disabled", true );
|
---|
110 | }
|
---|
111 |
|
---|
112 | function prepare(mrl)
|
---|
113 | {
|
---|
114 | //Wait for the player to be initialized before doing anything
|
---|
115 | vlc = document.getElementById("vlc");
|
---|
116 | var safeMRL = encodeURI(mrl);
|
---|
117 | setTimeout(function(){vlc.playlist.add(safeMRL)},350);
|
---|
118 | setTimeout(function(){play()},500);
|
---|
119 | setTimeout(function(){checkStatus()},500);
|
---|
120 | };
|
---|
121 |
|
---|
122 | function play()
|
---|
123 | {
|
---|
124 | vlc.playlist.play();
|
---|
125 | vlc.video.deinterlace.enable("blend");
|
---|
126 | //if (relPosTimer_is_on!=1)
|
---|
127 | //{
|
---|
128 | relPosTimer_is_on=1;
|
---|
129 | showRelPos();
|
---|
130 | //}
|
---|
131 | };
|
---|
132 |
|
---|
133 | function showRelPos()
|
---|
134 | {
|
---|
135 | if (relPosTimer_is_on=1)
|
---|
136 | {
|
---|
137 | if (vlc.input.position>=0 && vlc.input.position<=1 && user_is_dragging==0)
|
---|
138 | {
|
---|
139 | $('#slider').slider( "option", "value", vlc.input.position );
|
---|
140 | }
|
---|
141 | relpos=setTimeout(function(){showRelPos()},250);
|
---|
142 | }
|
---|
143 | };
|
---|
144 |
|
---|
145 | function stop()
|
---|
146 | {
|
---|
147 | clearTimeout(relpos);
|
---|
148 | clearTimeout(checkStatusTimer);
|
---|
149 | relPosTimer_is_on=0;
|
---|
150 | vlc.playlist.stop();
|
---|
151 | vlc.subtitle.track = 0;
|
---|
152 | $('#slider').slider( "option", "value", 0 );
|
---|
153 | $( "#subtitles" ).button( "option", "label", "Subtitles");
|
---|
154 | };
|
---|
155 |
|
---|
156 | function togglePause()
|
---|
157 | {
|
---|
158 | vlc.playlist.togglePause();
|
---|
159 | };
|
---|
160 |
|
---|
161 | function toggleMute()
|
---|
162 | {
|
---|
163 | vlc.audio.toggleMute();
|
---|
164 | };
|
---|
165 |
|
---|
166 | function getBrowserWidth()
|
---|
167 | {
|
---|
168 | xWidth = null;
|
---|
169 | if(window.screen != null)
|
---|
170 | xWidth = window.screen.availWidth;
|
---|
171 |
|
---|
172 | if(window.innerWidth != null)
|
---|
173 | xWidth = window.innerWidth;
|
---|
174 |
|
---|
175 | if(document.body != null) {
|
---|
176 | if ((typeof document.compatMode != "undefined")
|
---|
177 | && (document.compatMode == "CSS1Compat")) {
|
---|
178 | // in Strict mode
|
---|
179 | xWidth = document.documentElement.clientWidth;
|
---|
180 | }
|
---|
181 | else {
|
---|
182 | // Quirks mode
|
---|
183 | xWidth = document.body.clientWidth;
|
---|
184 | }
|
---|
185 | }
|
---|
186 |
|
---|
187 | return xWidth;
|
---|
188 | };
|
---|
189 |
|
---|
190 | function getBrowserHeight() {
|
---|
191 | xHeight = null;
|
---|
192 | if(window.screen != null)
|
---|
193 | xHeight = window.screen.availHeight;
|
---|
194 |
|
---|
195 | if(window.innerHeight != null)
|
---|
196 | xHeight = window.innerHeight;
|
---|
197 |
|
---|
198 | if(document.body != null){
|
---|
199 | if ((typeof document.compatMode != "undefined")
|
---|
200 | && (document.compatMode == "CSS1Compat")) {
|
---|
201 | // in Strict mode
|
---|
202 | xHeight = document.documentElement.clientHeight;
|
---|
203 | }
|
---|
204 | else {
|
---|
205 | // Quirks mode
|
---|
206 | xHeight = document.body.clientHeight;
|
---|
207 | }
|
---|
208 | }
|
---|
209 | return xHeight;
|
---|
210 | };
|
---|
211 |
|
---|
212 | function setFullscreenSize()
|
---|
213 | {
|
---|
214 | var height = getBrowserHeight() - 8;
|
---|
215 | var width = getBrowserWidth() - 8;
|
---|
216 | $( "#replaymePlayer" ).dialog( "option", "position", ['left','top'] );
|
---|
217 | $( "#replaymePlayer" ).dialog( "option", "height", height );
|
---|
218 | $( "#replaymePlayer" ).dialog( "option", "width", width );
|
---|
219 | setPlayerSize();
|
---|
220 | checkVideoSizeTimer=setTimeout(function(){setFullscreenSize()},1000);
|
---|
221 | }
|
---|
222 |
|
---|
223 | function toggleFullscreen()
|
---|
224 | {
|
---|
225 | vlc.video.toggleFullscreen();
|
---|
226 |
|
---|
227 | if (vlc.video.fullscreen == true)
|
---|
228 | {
|
---|
229 | previousHeight = $( "#replaymePlayer" ).dialog( "option", "height" );
|
---|
230 | previousWidth = $( "#replaymePlayer" ).dialog( "option", "width" );
|
---|
231 | setFullscreenSize();
|
---|
232 | }
|
---|
233 | else if (vlc.video.fullscreen == false)
|
---|
234 | {
|
---|
235 | clearTimeout(checkVideoSizeTimer);
|
---|
236 | $( "#replaymePlayer" ).dialog( "option", "height", previousHeight );
|
---|
237 | $( "#replaymePlayer" ).dialog( "option", "width", previousWidth );
|
---|
238 | setPlayerSize();
|
---|
239 | $( "#replaymePlayer" ).dialog( "option", "position", 'center' );
|
---|
240 | }
|
---|
241 | };
|
---|
242 |
|
---|
243 | function changeSubtitles()
|
---|
244 | {
|
---|
245 | if (vlc.subtitle.track == vlc.subtitle.count - 1)
|
---|
246 | {
|
---|
247 | vlc.subtitle.track = 0;
|
---|
248 | }
|
---|
249 | else
|
---|
250 | {
|
---|
251 | vlc.subtitle.track = vlc.subtitle.track + 1;
|
---|
252 | }
|
---|
253 | $( "#subtitles" ).button( "option", "label", "Subtitles: " + vlc.subtitle.description(vlc.subtitle.track) );
|
---|
254 | };
|
---|
255 |
|
---|
256 | function seek()
|
---|
257 | {
|
---|
258 | vlc.input.position = $('#slider').slider( "option", "value" );
|
---|
259 | user_is_dragging=0;
|
---|
260 | };
|
---|
261 |
|
---|
262 | function setPlayerSize()
|
---|
263 | {
|
---|
264 | var width = 0, height = 0;
|
---|
265 |
|
---|
266 | width = $( "#replaymePlayer" ).dialog( "option", "width" );
|
---|
267 | height = $( "#replaymePlayer" ).dialog( "option", "height" );
|
---|
268 | width = width - 25;
|
---|
269 | height = height - 130;
|
---|
270 |
|
---|
271 | if (document.getElementById("vlc") != null)
|
---|
272 | {
|
---|
273 | document.getElementById("vlc").style.height = height + "px";
|
---|
274 | document.getElementById("vlc").style.width = width + "px";
|
---|
275 | }
|
---|
276 | };
|
---|
277 |
|
---|
278 | //JQuery Stuff
|
---|
279 | $(function() {
|
---|
280 |
|
---|
281 | // Open Video Player link
|
---|
282 | $('#open_player_link').click(function(){
|
---|
283 | $('#replaymePlayer').dialog('open');
|
---|
284 | return false;
|
---|
285 | });
|
---|
286 |
|
---|
287 |
|
---|
288 | //Video Player window
|
---|
289 | $("#replaymePlayer").dialog({
|
---|
290 | autoOpen: false,
|
---|
291 | height: 620,
|
---|
292 | width: 645,
|
---|
293 | modal: true,
|
---|
294 | beforeclose: function(event, ui) {
|
---|
295 | onEnd();
|
---|
296 | $('#mute').button({
|
---|
297 | label: 'mute',
|
---|
298 | icons: {
|
---|
299 | primary: 'ui-icon-volume-on'
|
---|
300 | }
|
---|
301 | });
|
---|
302 | $( "#subtitles" ).button( "option", "label", "Subtitles");
|
---|
303 | },
|
---|
304 | resizeStart: function(event, ui) {
|
---|
305 | document.getElementById("vlc").style.height = "70%";
|
---|
306 | document.getElementById("vlc").style.width = "100%";},
|
---|
307 | resizeStop: function(event, ui) { setPlayerSize(); }
|
---|
308 | });
|
---|
309 |
|
---|
310 | //Hover states on the Video Player link
|
---|
311 | $('#open_player_link, ul#icons li').hover(
|
---|
312 | function() { $(this).addClass('ui-state-hover'); },
|
---|
313 | function() { $(this).removeClass('ui-state-hover'); }
|
---|
314 | );
|
---|
315 |
|
---|
316 |
|
---|
317 | //Player toolbar:
|
---|
318 | $('#play').button({
|
---|
319 | text: false,
|
---|
320 | icons: {
|
---|
321 | primary: 'ui-icon-play'
|
---|
322 | }
|
---|
323 | })
|
---|
324 | .click(function() {
|
---|
325 | var options;
|
---|
326 | if ($(this).text() == 'play') {
|
---|
327 | play();
|
---|
328 | options = {
|
---|
329 | label: 'pause',
|
---|
330 | icons: {
|
---|
331 | primary: 'ui-icon-pause'
|
---|
332 | }
|
---|
333 | };
|
---|
334 | } else {
|
---|
335 | togglePause();
|
---|
336 | options = {
|
---|
337 | label: 'play',
|
---|
338 | icons: {
|
---|
339 | primary: 'ui-icon-play'
|
---|
340 | }
|
---|
341 | };
|
---|
342 | }
|
---|
343 | $(this).button('option', options);
|
---|
344 | });
|
---|
345 |
|
---|
346 | $('#stop').button({
|
---|
347 | text: false,
|
---|
348 | icons: {
|
---|
349 | primary: 'ui-icon-stop'
|
---|
350 | }
|
---|
351 | })
|
---|
352 | .click(function() {
|
---|
353 | stop();
|
---|
354 | $('#play').button('option', {
|
---|
355 | label: 'play',
|
---|
356 | icons: {
|
---|
357 | primary: 'ui-icon-play'
|
---|
358 | }
|
---|
359 | });
|
---|
360 | });
|
---|
361 |
|
---|
362 | $('#mute').button({
|
---|
363 | text: false,
|
---|
364 | icons: {
|
---|
365 | primary: 'ui-icon-volume-on'
|
---|
366 | }
|
---|
367 | })
|
---|
368 | .click(function() {
|
---|
369 | var options;
|
---|
370 | if ($(this).text() == 'mute on') {
|
---|
371 | toggleMute();
|
---|
372 | options = {
|
---|
373 | label: 'mute off',
|
---|
374 | icons: {
|
---|
375 | primary: 'ui-icon-volume-on'
|
---|
376 | }
|
---|
377 | };
|
---|
378 | } else {
|
---|
379 | toggleMute();
|
---|
380 | options = {
|
---|
381 | label: 'mute on',
|
---|
382 | icons: {
|
---|
383 | primary: 'ui-icon-volume-off'
|
---|
384 | }
|
---|
385 | };
|
---|
386 | }
|
---|
387 | $(this).button('option', options);
|
---|
388 | });
|
---|
389 |
|
---|
390 | $('#fullscreen').button({
|
---|
391 | text: false,
|
---|
392 | icons: {
|
---|
393 | primary: 'ui-icon-arrow-4-diag'
|
---|
394 | }
|
---|
395 | })
|
---|
396 | .click(function() {
|
---|
397 | toggleFullscreen();
|
---|
398 | });
|
---|
399 |
|
---|
400 | $('#subtitles').button({
|
---|
401 | icons: {primary: 'ui-icon-grip-dotted-horizontal'},
|
---|
402 | disabled: true
|
---|
403 | })
|
---|
404 | .click(function() {
|
---|
405 | changeSubtitles();
|
---|
406 | });
|
---|
407 |
|
---|
408 | //Seeking bar
|
---|
409 | $('#slider').slider({
|
---|
410 | start: function(event, ui) {user_is_dragging=1;},
|
---|
411 | stop: function(event, ui) {seek();},
|
---|
412 | animate: true,
|
---|
413 | min: 0,
|
---|
414 | max: 1,
|
---|
415 | step: 0.000125
|
---|
416 | });
|
---|
417 |
|
---|
418 | }); |
---|