source: gs2-extensions/video-and-audio/trunk/src/web/script/replayer.js@ 23295

Last change on this file since 23295 was 23295, checked in by max, 13 years ago

Add a new video player embedded inside Firefox using VLC that can play many video formats. For this to work VLC Mozilla plugin should be selected when installing VLC.
File size: 8.5 KB
Line 
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
12var relPosTimer_is_on=0;
13var relpos;
14var user_is_dragging=0;
15var checkStatusTimer;
16var checkVideoSizeTimer;
17var previousHeight=0;
18var previousWidth=0;
19var vlc;
20
21
22//Used for the look and feel of the player
23function 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
67function onOpening()
68{
69 $('#play').button('option', {
70 label: 'pause',
71 icons: {
72 primary: 'ui-icon-pause'
73 }
74 });
75 document.getElementById("status").innerHTML = "&nbsp;&nbsp;<img src='" + bufferImgURL + "'>&nbsp;Connecting...";
76}
77
78function onBuffering()
79{
80 $('#play').button('option', {
81 label: 'pause',
82 icons: {
83 primary: 'ui-icon-pause'
84 }
85 });
86 document.getElementById("status").innerHTML = "&nbsp;&nbsp;<img src='" + bufferImgURL + "'>&nbsp;Buffering...";
87}
88
89function 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
100function 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
112function prepare(mrl)
113{
114//Wait for the player to be initialized before doing anything
115vlc = document.getElementById("vlc");
116var safeMRL = encodeURI(mrl);
117setTimeout(function(){vlc.playlist.add(safeMRL)},350);
118setTimeout(function(){play()},500);
119setTimeout(function(){checkStatus()},500);
120};
121
122function 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
133function 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
145function 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
156function togglePause()
157{
158 vlc.playlist.togglePause();
159};
160
161function toggleMute()
162{
163 vlc.audio.toggleMute();
164};
165
166function 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
190function 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
212function 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
223function 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
243function 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
256function seek()
257{
258 vlc.input.position = $('#slider').slider( "option", "value" );
259 user_is_dragging=0;
260};
261
262function 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});
Note: See TracBrowser for help on using the repository browser.