1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
3 <TITLE>VLC Plugin test page</TITLE>
8 font-family : Arial, Helvetica, sans-serif;
13 <SCRIPT type="text/javascript" src="blueshoes-4.5/javascript/lib/LibCrossBrowser.js"></SCRIPT>
14 <SCRIPT type="text/javascript" src="blueshoes-4.5/javascript/lib/EventHandler.js"></SCRIPT>
15 <SCRIPT type="text/javascript" src="blueshoes-4.5/javascript/core/form/Bs_FormUtil.lib.js"></SCRIPT>
16 <SCRIPT type="text/javascript" src="blueshoes-4.5/javascript/components/slider/Bs_Slider.class.js"></SCRIPT>
18 <SCRIPT language="JavaScript"><!--
21 inputTracker = new Bs_Slider();
24 inputTracker.attachOnChange(onInputTrackerChange);
25 inputTracker.attachOnSlideStart(onInputTrackerScrollStart);
26 inputTracker.attachOnSlideEnd(onInputTrackerScrollEnd);
27 inputTracker.width = 530;
28 inputTracker.height = 15;
29 inputTracker.minVal = 0;
30 inputTracker.maxVal = 1.0;
31 inputTracker.valueDefault = 0;
32 inputTracker.valueInterval = 1/530;
33 inputTracker.setDisabled(true);
34 inputTracker.imgDir = 'blueshoes-4.5/javascript/components/slider/img/';
35 inputTracker.setBackgroundImage('aluminumalloyvolcanic/horizontal_background.gif', 'repeat');
36 inputTracker.setArrowIconLeft('aluminumalloyvolcanic/horizontal_backgroundLeft.gif', 2, 19);
37 inputTracker.setArrowIconRight('aluminumalloyvolcanic/horizontal_backgroundRight.gif', 2, 19);
38 inputTracker.setSliderIcon('aluminumalloyvolcanic/horizontal_knob.gif', 15, 19);
39 inputTracker.useInputField = 0;
40 inputTracker.draw('inputTrackerDiv');
43 if( navigator.appName.indexOf("Microsoft Internet")==-1 )
47 else if( document.readyState == 'complete' )
53 /* Explorer loads plugins asynchronously */
54 document.onreadystatechange=function()
56 if( document.readyState == 'complete' )
66 if (window.document[name])
68 return window.document[name];
70 if (navigator.appName.indexOf("Microsoft Internet")==-1)
72 if (document.embeds && document.embeds[name])
73 return document.embeds[name];
75 else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
77 return document.getElementById(name);
81 function registerVLCEvent(event, handler)
83 var vlc = getVLC("vlc");
86 if (vlc.attachEvent) {
88 vlc.attachEvent (event, handler);
89 } else if (vlc.addEventListener) {
90 // Mozilla: DOM level 2
91 vlc.addEventListener (event, handler, true);
94 eval("vlc.on" + event + " = handler");
99 function unregisterVLCEvent(event, handler)
101 var vlc = getVLC("vlc");
104 if (vlc.detachEvent) {
106 vlc.detachEvent (event, handler);
107 } else if (vlc.removeEventListener) {
108 // Mozilla: DOM level 2
109 vlc.removeEventListener (event, handler, true);
112 eval("vlc.on" + event + " = null");
117 // JS VLC API callbacks
118 function handleMediaPlayerMediaChanged()
120 document.getElementById("info").innerHTML = "Media Changed";
123 function handle_MediaPlayerNothingSpecial()
125 document.getElementById("state").innerHTML = "Idle...";
128 function handle_MediaPlayerOpening()
133 function handle_MediaPlayerBuffering(val)
135 document.getElementById("info").innerHTML = val + "%";
138 function handle_MediaPlayerPlaying()
143 function handle_MediaPlayerPaused()
148 function handle_MediaPlayerStopped()
153 function handle_MediaPlayerForward()
155 document.getElementById("state").innerHTML = "Forward...";
158 function handle_MediaPlayerBackward()
160 document.getElementById("state").innerHTML = "Backward...";
163 function handle_MediaPlayerEndReached()
168 function handle_MediaPlayerEncounteredError()
173 function handle_MediaPlayerTimeChanged(time)
175 var vlc = getVLC("vlc");
176 var info = document.getElementById("info");
179 var mediaLen = vlc.input.length;
183 info.innerHTML = formatTime(time)+"/"+formatTime(mediaLen);
188 function handle_MediaPlayerPositionChanged(val)
190 // set javascript slider to correct position
193 function handle_MediaPlayerSeekableChanged(val)
198 function handle_MediaPlayerPausableChanged(val)
203 function handle_MediaPlayerTitleChanged(val)
206 document.getElementById("info").innerHTML = "Title: " + val;
209 function handle_MediaPlayerLengthChanged(val)
211 //setMediaLength(val);
215 function onVLCPluginReady()
217 registerVLCEvent("MediaPlayerMediaChanged", handleMediaPlayerMediaChanged);
218 registerVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial);
219 registerVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening);
220 registerVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering);
221 registerVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying);
222 registerVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
223 registerVLCEvent("MediaPlayerStopped", handle_MediaPlayerStopped);
224 registerVLCEvent("MediaPlayerForward", handle_MediaPlayerForward);
225 registerVLCEvent("MediaPlayerBackward", handle_MediaPlayerBackward);
226 registerVLCEvent("MediaPlayerEndReached", handle_MediaPlayerEndReached);
227 registerVLCEvent("MediaPlayerEncounteredError", handle_MediaPlayerEncounteredError);
228 registerVLCEvent("MediaPlayerTimeChanged", handle_MediaPlayerTimeChanged);
229 registerVLCEvent("MediaPlayerPositionChanged", handle_MediaPlayerPositionChanged);
230 registerVLCEvent("MediaPlayerSeekableChanged", handle_MediaPlayerSeekableChanged);
231 registerVLCEvent("MediaPlayerPausableChanged", handle_MediaPlayerPausableChanged);
232 registerVLCEvent("MediaPlayerTitleChanged", handle_MediaPlayerTitleChanged);
233 registerVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged);
238 unregisterVLCEvent('MediaPlayerMouseGrab', handleMouseGrab);
239 unregisterVLCEvent('MediaPlayerMouseRelease', handleMouseRelease);
240 unregisterVLCEvent('MediaPlayerMouseClick', handleMouseClick);
242 unregisterVLCEvent("MediaPlayerMediaChanged", handleMediaPlayerMediaChanged);
243 unregisterVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial);
244 unregisterVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening);
245 unregisterVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering);
246 unregisterVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying);
247 unregisterVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
248 unregisterVLCEvent("MediaPlayerStopped", handle_MediaPlayerStopped);
249 unregisterVLCEvent("MediaPlayerForward", handle_MediaPlayerForward);
250 unregisterVLCEvent("MediaPlayerBackward", handle_MediaPlayerBackward);
251 unregisterVLCEvent("MediaPlayerEndReached", handle_MediaPlayerEndReached);
252 unregisterVLCEvent("MediaPlayerEncounteredError", handle_MediaPlayerEncounteredError);
253 unregisterVLCEvent("MediaPlayerTimeChanged", handle_MediaPlayerTimeChanged);
254 unregisterVLCEvent("MediaPlayerPositionChanged", handle_MediaPlayerPositionChanged);
255 unregisterVLCEvent("MediaPlayerSeekableChanged", handle_MediaPlayerSeekableChanged);
256 unregisterVLCEvent("MediaPlayerPausableChanged", handle_MediaPlayerPausableChanged);
257 unregisterVLCEvent("MediaPlayerTitleChanged", handle_MediaPlayerTitleChanged);
258 unregisterVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged);
263 <BODY onLoad="init();" onClose="close();">
267 <INPUT size="90" id="targetTextField" value="">
268 <INPUT type=submit value="Go" onClick="doGo(document.getElementById('targetTextField').value);">
269 <INPUT type=submit value="Add" onClick="doAdd(document.getElementById('targetTextField').value);">
271 <TR><TD align="center" colspan="2">
273 Insert VideoLAN.VLCPlugin.2
275 <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
280 <param name="MRL" value="" />
281 <param name="ShowDisplay" value="True" />
282 <param name="AutoLoop" value="False" />
283 <param name="AutoPlay" value="False" />
284 <param name="Volume" value="50" />
285 <param name="toolbar" value="true" />
286 <param name="StartTime" value="0" />
287 <EMBED pluginspage="http://www.videolan.org"
288 type="application/x-vlc-plugin"
289 version="VideoLAN.VLCPlugin.2"
293 text="Waiting for video"
300 <TD valign="top" width="550">
304 <DIV id="inputTrackerDiv"</DIV>
305 </TD><TD width="15%">
306 <DIV id="info" style="text-align:center">-:--:--/-:--:--</DIV>
307 <DIV id="state" style="text-align:center">Stopped...</DIV>
311 <INPUT type=button id="PlayOrPause" value=" Play " onClick='doPlayOrPause();'>
312 <INPUT type=button value="Stop" onClick='doStop();'>
314 <INPUT type=button value=" << " onClick='doPlaySlower();'>
315 <INPUT type=button value="Reverse" onClick='doReverse();'>
316 <INPUT type=button value=" >> " onClick='doPlayFaster();'>
318 <INPUT type=button value="Fullscreen" onClick='getVLC("vlc").video.toggleFullscreen();'>
319 <INPUT type=button value="Version" onClick='alert("vlc " + getVLC("vlc").VersionInfo);'>
320 <INPUT type=button value=" State " onClick='alert("state: " + getVLC("vlc").input.state);'>
321 </TD><TD align="right">
322 <SPAN style="text-align:center">Volume:</SPAN>
323 <INPUT type=button value=" - " onClick='updateVolume(-10)'>
324 <SPAN id="volumeTextField" style="text-align:center">--</SPAN>
325 <INPUT type=button value=" + " onClick='updateVolume(+10)'>
326 <INPUT type=button value="Mute" onClick='getVLC("vlc").audio.toggleMute();'>
330 <INPUT type=button value="Prev" onClick='getVLC("vlc").playlist.prev();'>
331 <INPUT type=button value="Next" onClick='getVLC("vlc").playlist.next();'>
332 <INPUT type=button value="Clear All" onClick='doPlaylistClearAll();'>
334 <SELECT readonly onChange='doAspectRatio(this.value)'>
335 <OPTION value="default">Default</OPTION>
336 <OPTION value="1:1">1:1</OPTION>
337 <OPTION value="4:3">4:3</OPTION>
338 <OPTION value="16:9">16:9</OPTION>
339 <OPTION value="221:100">221:100</OPTION>
340 <OPTION value="5:4">5:4</OPTION>
342 </TD><TD align="right">
343 <INPUT type=button id="itemCount" value=" Items 0 " onClick='doItemCount();'>
344 <INPUT size=4 value="" id="removeid"><INPUT type=submit value="Delete" onClick="doRemoveItem(document.getElementById('removeid').value);">
347 <TR><TD>Audio Channel:
348 <SELECT readonly onClick='doAudioChannel(this.value);'>
349 <OPTION value=1>Stereo</OPTION>
350 <OPTION value=2>Reverse Stereo</OPTION>
351 <OPTION value=3>Left</OPTION>
352 <OPTION value=4>Right</OPTION>
353 <OPTION value=5>Dolby</OPTION>
357 <INPUT type=button value="current channel" onClick='alert(getVLC("vlc").audio.channel);'>
360 <TR><TD> Audio Track:
361 <INPUT type=button value=" + " onClick='doAudioTrack(1);'>
362 <SPAN id="trackTextField" style="text-align:center">--</SPAN>
363 <INPUT type=button value=" - " onClick='doAudioTrack(-1);'>
364 <INPUT type=button value="current track" onClick='alert(getVLC("vlc").audio.description(vlc.audio.track));'>
365 <INPUT type=button value="number of track" onClick='alert(getVLC("vlc").audio.count);'>
368 <INPUT type=button value="set slider" onClick='doSetSlider();'>
369 <INPUT type=button value="get position" onClick='doGetPosition();'>
374 <INPUT type=button value=" + " onClick='doSubtitle(1);'>
375 <SPAN id="spuTextField" style="text-align:center">--</SPAN>
376 <INPUT type=button value=" - " onClick='doSubtitle(-1);'>
377 <INPUT type=button value="current subtitle" onClick='alert(getVLC("vlc").subtitle.description(vlc.subtitle.track));'>
378 <INPUT type=button value="number of subtitle" onClick='alert(getVLC("vlc").subtitle.count);'>
383 <INPUT type=button value="BLEND" onClick='getVLC("vlc").video.deinterlace.enable("blend");'>
384 <INPUT type=button value=" X " onClick='getVLC("vlc").video.deinterlace.enable("x");'>
385 <INPUT type=button value="Disable" onClick='getVLC("vlc").video.deinterlace.disable();'>
389 <TD>Marquee video filter:
390 <INPUT type=button value="Enable" onClick='getVLC("vlc").video.marquee.enable();'>
391 <INPUT type=button value="Disable" onClick='getVLC("vlc").video.marquee.disable();'>
392 <INPUT size=4 value="" id="marqueeIntValue">
393 <SELECT readonly onClick="doMarqueeOption(this.value,document.getElementById('marqueeIntValue').value);">
394 <OPTION value=1>Color</OPTION>
395 <OPTION value=2>Opacity</OPTION>
396 <OPTION value=3>Position</OPTION>
397 <OPTION value=4>Refresh</OPTION>
398 <OPTION value=5>Size</OPTION>
399 <OPTION value=6>Text</OPTION>
400 <OPTION value=7>Timeout</OPTION>
401 <OPTION value=8>X</OPTION>
402 <OPTION value=9>Y</OPTION>
407 <TD>Logo video filter:
408 <INPUT type=button value="Enable" onClick='getVLC("vlc").video.logo.enable();'>
409 <INPUT type=button value="Disable" onClick='getVLC("vlc").video.logo.disable();'>
410 <INPUT size=4 value="" id="logoIntValue">
411 <SELECT readonly onClick="doLogoOption(this.value,document.getElementById('logoIntValue').value);">
412 <OPTION value=1>File</OPTION>
413 <OPTION value=2>Position</OPTION>
414 <OPTION value=3>Opacity</OPTION>
415 <OPTION value=4>Repeat</OPTION>
416 <OPTION value=5>Delay</OPTION>
417 <OPTION value=6>X</OPTION>
418 <OPTION value=7>Y</OPTION>
424 <INPUT type=button id="telx" value="Teletext off" onClick='doToggleTeletext();'>
426 <INPUT size=4 value="100" id="telxPage" onClick='doTelxPage(document.getElementById("telxPage").value);'>
430 <SCRIPT language="javascript">
435 var monitorTimerId = 0;
437 var inputTrackerScrolling = false;
438 var inputTrackerIgnoreChange = false;
439 var telxState = false;
443 function setPauseable(val)
448 function setSeekable(val)
453 function doSetSlider()
455 var vlc = getVLC("vlc");
457 // set slider to new position
459 vlc.input.time = (vlc.input.length/2);
462 function doGetPosition()
464 var vlc = getVLC("vlc");
466 // set slider to new position
468 alert( "position is " + vlc.input.time);
471 function doReverse(rate)
473 var vlc = getVLC("vlc");
475 vlc.input.rate = -1.0 * vlc.input.rate;
478 function doAudioChannel(value)
480 var vlc = getVLC("vlc");
482 vlc.audio.channel = parseInt(value);
485 function doAudioTrack(value)
487 var vlc = getVLC("vlc");
490 vlc.audio.track = vlc.audio.track + value;
491 document.getElementById("trackTextField").innerHTML = vlc.audio.track;
495 function doAspectRatio(value)
497 var vlc = getVLC("vlc");
499 vlc.video.aspectRatio = value;
502 function doSubtitle(value)
504 var vlc = getVLC("vlc");
507 vlc.subtitle.track = vlc.subtitle.track + value;
508 document.getElementById("spuTextField").innerHTML = vlc.subtitle.track;
512 function doTelxPage(value)
514 var vlc = getVLC("vlc");
516 vlc.video.teletext = parseInt(value);
519 function doToggleTeletext()
521 var vlc = getVLC("vlc");
525 vlc.video.toggleTeletext();
528 document.getElementById("telx").innerHTML = "Teletext on";
533 document.getElementById("telx").innerHTML = "Teletext off";
539 function doItemCount()
541 var vlc = getVLC("vlc");
544 var count = vlc.playlist.items.count;
545 document.getElementById("itemCount").value = " Items " + count + " ";
549 function doRemoveItem(item)
551 var vlc = getVLC("vlc");
553 vlc.playlist.items.remove(item);
556 function doPlaylistClearAll()
558 var vlc = getVLC("vlc");
561 vlc.playlist.items.clear();
562 while( vlc.playlist.items.count > 0)
564 // wait till playlist empties.
570 function updateVolume(deltaVol)
572 var vlc = getVLC("vlc");
575 vlc.audio.volume += deltaVol;
576 document.getElementById("volumeTextField").innerHTML = vlc.audio.volume+"%";
580 function formatTime(timeVal)
582 if( typeof timeVal != 'number' )
585 var timeHour = Math.round(timeVal / 1000);
586 var timeSec = timeHour % 60;
588 timeSec = '0'+timeSec;
589 timeHour = (timeHour - timeSec)/60;
590 var timeMin = timeHour % 60;
592 timeMin = '0'+timeMin;
593 timeHour = (timeHour - timeMin)/60;
595 return timeHour+":"+timeMin+":"+timeSec;
597 return timeMin+":"+timeSec;
602 var vlc = getVLC("vlc");
606 newState = vlc.input.state;
610 // current media has stopped
613 else if( newState == 1 )
615 // current media is openning/connecting
618 else if( newState == 2 )
620 // current media is buffering data
623 else if( newState == 3 )
625 // current media is now playing
628 else if( newState == 4 )
630 // current media is now paused
633 else if( newState == 5 )
635 // current media has stopped
638 else if( newState == 6 )
640 // current media has ended
643 else if( newState == 7 )
645 // current media encountered error
652 var vlc = getVLC("vlc");
657 newState = vlc.input.state;
660 if( prevState != newState )
664 // current media has stopped
667 else if( newState == 1 )
669 // current media is openning/connecting
672 else if( newState == 2 )
674 // current media is buffering data
677 else if( newState == 3 )
679 // current media is now playing
682 else if( newState == 4 )
684 // current media is now paused
687 else if( newState == 5 )
689 // current media has stopped
692 else if( newState == 6 )
694 // current media has ended
697 else if( newState == 7 )
699 // current media encountered error
702 prevState = newState;
704 else if( newState == 3 )
706 // current media is playing
709 if( monitorTimerId == 0 )
711 monitorTimerId = setInterval("monitor()", 1000);
717 function doGo(targetURL)
719 var vlc = getVLC("vlc");
723 vlc.playlist.items.clear();
724 while( vlc.playlist.items.count > 0 )
726 // clear() may return before the playlist has actually been cleared
727 // just wait for it to finish its job
729 var options = [":rtsp-tcp"];
730 var itemId = vlc.playlist.add(targetURL,"",options);
735 vlc.playlist.playItem(itemId);
736 if( monitorTimerId == 0 )
743 alert("cannot play at the moment !");
749 function doAdd(targetURL)
751 var vlc = getVLC("vlc");
752 var options = [":vout-filter=deinterlace", ":deinterlace-mode=linear"];
755 vlc.playlist.add(targetURL, "", options);
761 function doPlayOrPause()
763 var vlc = getVLC("vlc");
766 if( vlc.playlist.isPlaying && canPause )
768 vlc.playlist.togglePause();
771 else if( vlc.playlist.items.count > 0 )
778 alert('nothing to play !');
785 var vlc = getVLC("vlc");
790 if( monitorTimerId != 0 )
792 clearInterval(monitorTimerId);
798 function doPlaySlower()
800 var vlc = getVLC("vlc");
802 vlc.input.rate = vlc.input.rate / 2;
805 function doPlayFaster()
807 var vlc = getVLC("vlc");
809 vlc.input.rate = vlc.input.rate * 2;
812 function doMarqueeOption(option, value)
814 var vlc = getVLC("vlc");
815 val = parseInt(value);
819 vlc.video.marquee.color = val;
821 vlc.video.marquee.opacity = val;
823 vlc.video.marquee.position = value;
825 vlc.video.marquee.refresh = val;
827 vlc.video.marquee.size = val;
829 vlc.video.marquee.text = value;
831 vlc.video.marquee.timeout = val;
833 vlc.video.marquee.x = val;
835 vlc.video.marquee.y = val;
839 function doLogoOption(option, value)
841 var vlc = getVLC("vlc");
845 vlc.video.logo.file(value);
847 vlc.video.logo.position = value;
848 val = parseInt(value);
850 vlc.video.logo.opacity = val;
852 vlc.video.logo.repeat = val;
854 vlc.video.logo.delay = val;
856 vlc.video.logo.x = val;
858 vlc.video.logo.y = val;
866 document.getElementById("state").innerHTML = "Opening...";
867 document.getElementById("PlayOrPause").value = "Pause";
872 document.getElementById("state").innerHTML = "Buffering...";
873 document.getElementById("PlayOrPause").value = "Pause";
878 document.getElementById("state").innerHTML = "Playing...";
879 document.getElementById("PlayOrPause").value = "Pause";
885 document.getElementById("state").innerHTML = "End...";
888 var liveFeedText = ["Live", "((Live))", "(( Live ))", "(( Live ))"];
889 var liveFeedRoll = 0;
893 if( !inputTrackerScrolling )
895 var vlc = getVLC("vlc");
896 var info = document.getElementById("info");
899 var mediaLen = vlc.input.length;
900 inputTrackerIgnoreChange = true;
906 if( inputTracker.maxVal == 1.0 )
908 inputTracker.setDisabled(false);
909 inputTracker.maxVal = 1.0;
911 inputTracker.setValue(vlc.input.position);
913 info.innerHTML = formatTime(vlc.input.time)+"/"+formatTime(mediaLen);
917 // non-seekable "live" media
920 if( inputTracker.maxVal != 0.0 )
922 inputTracker.maxVal = 0.0;
923 inputTracker.setValue(0.0);
924 inputTracker.setDisabled(true);
927 liveFeedRoll = liveFeedRoll & 3;
928 info.innerHTML = liveFeedText[liveFeedRoll++];
930 inputTrackerIgnoreChange = false;
937 document.getElementById("state").innerHTML = "Paused...";
938 document.getElementById("PlayOrPause").value = " Play ";
943 var vlc = getVLC("vlc");
947 if( !inputTracker.disabled )
949 inputTracker.setValue(inputTracker.minVal);
950 inputTracker.setDisabled(true);
954 document.getElementById("info").innerHTML = "-:--:--/-:--:--";
955 document.getElementById("state").innerHTML = "Stopped...";
956 document.getElementById("PlayOrPause").value = " Play ";
961 var vlc = getVLC("vlc");
963 document.getElementById("state").innerHTML = "Error...";
966 function onInputTrackerScrollStart()
968 inputTrackerScrolling = true;
971 function onInputTrackerScrollEnd(inputTracker, value, pos)
973 inputTrackerScrolling = false;
976 function onInputTrackerChange(inputTracker, value, pos)
978 if( !inputTrackerIgnoreChange )
980 var vlc = getVLC("vlc");
983 if( (vlc.input.state == 3) && (vlc.input.position != value) )
985 var info = document.getElementById("info");
986 vlc.input.position = value;
987 info.innerHTML = formatTime(vlc.input.time)+"/"+formatTime(vlc.input.length);