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 language="JavaScript"><!--
16 if( navigator.appName.indexOf("Microsoft Internet")==-1 )
20 else if( document.readyState == 'complete' )
26 /* Explorer loads plugins asynchronously */
27 document.onreadystatechange=function()
29 if( document.readyState == 'complete' )
39 if (window.document[name])
41 return window.document[name];
43 if (navigator.appName.indexOf("Microsoft Internet")==-1)
45 if (document.embeds && document.embeds[name])
46 return document.embeds[name];
48 else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
50 return document.getElementById(name);
54 function registerVLCEvent(event, handler)
56 var vlc = getVLC("vlc");
59 if (vlc.attachEvent) {
61 vlc.attachEvent (event, handler);
62 } else if (vlc.addEventListener) {
63 // Mozilla: DOM level 2
64 vlc.addEventListener (event, handler, true);
67 eval("vlc.on" + event + " = handler");
72 function unregisterVLCEvent(event, handler)
74 var vlc = getVLC("vlc");
77 if (vlc.detachEvent) {
79 vlc.detachEvent (event, handler);
80 } else if (vlc.removeEventListener) {
81 // Mozilla: DOM level 2
82 vlc.removeEventListener (event, handler, true);
85 eval("vlc.on" + event + " = null");
90 // JS VLC API callbacks
91 function handleMediaPlayerMediaChanged()
93 document.getElementById("info").innerHTML = "Media Changed";
96 function handle_MediaPlayerNothingSpecial()
98 document.getElementById("state").innerHTML = "Idle...";
101 function handle_MediaPlayerOpening()
106 function handle_MediaPlayerBuffering(val)
108 document.getElementById("info").innerHTML = val + "%";
111 function handle_MediaPlayerPlaying()
116 function handle_MediaPlayerPaused()
121 function handle_MediaPlayerStopped()
126 function handle_MediaPlayerForward()
128 document.getElementById("state").innerHTML = "Forward...";
131 function handle_MediaPlayerBackward()
133 document.getElementById("state").innerHTML = "Backward...";
136 function handle_MediaPlayerEndReached()
141 function handle_MediaPlayerEncounteredError()
146 function handle_MediaPlayerTimeChanged(time)
148 var vlc = getVLC("vlc");
149 var info = document.getElementById("info");
152 var mediaLen = vlc.input.length;
156 info.innerHTML = formatTime(time)+"/"+formatTime(mediaLen);
161 function handle_MediaPlayerPositionChanged(val)
163 // set javascript slider to correct position
166 function handle_MediaPlayerSeekableChanged(val)
171 function handle_MediaPlayerPausableChanged(val)
176 function handle_MediaPlayerTitleChanged(val)
179 document.getElementById("info").innerHTML = "Title: " + val;
182 function handle_MediaPlayerLengthChanged(val)
184 //setMediaLength(val);
188 function onVLCPluginReady()
190 registerVLCEvent("MediaPlayerMediaChanged", handleMediaPlayerMediaChanged);
191 registerVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial);
192 registerVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening);
193 registerVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering);
194 registerVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying);
195 registerVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
196 registerVLCEvent("MediaPlayerStopped", handle_MediaPlayerStopped);
197 registerVLCEvent("MediaPlayerForward", handle_MediaPlayerForward);
198 registerVLCEvent("MediaPlayerBackward", handle_MediaPlayerBackward);
199 registerVLCEvent("MediaPlayerEndReached", handle_MediaPlayerEndReached);
200 registerVLCEvent("MediaPlayerEncounteredError", handle_MediaPlayerEncounteredError);
201 registerVLCEvent("MediaPlayerTimeChanged", handle_MediaPlayerTimeChanged);
202 registerVLCEvent("MediaPlayerPositionChanged", handle_MediaPlayerPositionChanged);
203 registerVLCEvent("MediaPlayerSeekableChanged", handle_MediaPlayerSeekableChanged);
204 registerVLCEvent("MediaPlayerPausableChanged", handle_MediaPlayerPausableChanged);
205 registerVLCEvent("MediaPlayerTitleChanged", handle_MediaPlayerTitleChanged);
206 registerVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged);
211 unregisterVLCEvent("MediaPlayerMediaChanged", handleMediaPlayerMediaChanged);
212 unregisterVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial);
213 unregisterVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening);
214 unregisterVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering);
215 unregisterVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying);
216 unregisterVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
217 unregisterVLCEvent("MediaPlayerStopped", handle_MediaPlayerStopped);
218 unregisterVLCEvent("MediaPlayerForward", handle_MediaPlayerForward);
219 unregisterVLCEvent("MediaPlayerBackward", handle_MediaPlayerBackward);
220 unregisterVLCEvent("MediaPlayerEndReached", handle_MediaPlayerEndReached);
221 unregisterVLCEvent("MediaPlayerEncounteredError", handle_MediaPlayerEncounteredError);
222 unregisterVLCEvent("MediaPlayerTimeChanged", handle_MediaPlayerTimeChanged);
223 unregisterVLCEvent("MediaPlayerPositionChanged", handle_MediaPlayerPositionChanged);
224 unregisterVLCEvent("MediaPlayerSeekableChanged", handle_MediaPlayerSeekableChanged);
225 unregisterVLCEvent("MediaPlayerPausableChanged", handle_MediaPlayerPausableChanged);
226 unregisterVLCEvent("MediaPlayerTitleChanged", handle_MediaPlayerTitleChanged);
227 unregisterVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged);
232 <BODY onLoad="init();" onClose="close();">
236 <INPUT size="90" id="targetTextField" value="">
237 <INPUT type=submit value="Go" onClick="doGo(document.getElementById('targetTextField').value);">
238 <INPUT type=submit value="Add" onClick="doAdd(document.getElementById('targetTextField').value);">
240 <TR><TD align="center" colspan="2">
242 Insert VideoLAN.VLCPlugin.2
244 <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
249 <param name="MRL" value="" />
250 <param name="ShowDisplay" value="True" />
251 <param name="AutoLoop" value="False" />
252 <param name="AutoPlay" value="False" />
253 <param name="Volume" value="50" />
254 <param name="toolbar" value="true" />
255 <param name="StartTime" value="0" />
256 <EMBED pluginspage="http://www.videolan.org"
257 type="application/x-vlc-plugin"
258 version="VideoLAN.VLCPlugin.2"
262 text="Waiting for video"
269 <TD valign="top" width="550">
273 <DIV id="inputTrackerDiv"</DIV>
274 </TD><TD width="15%">
275 <DIV id="info" style="text-align:center">-:--:--/-:--:--</DIV>
276 <DIV id="state" style="text-align:center">Stopped...</DIV>
280 <INPUT type=button id="PlayOrPause" value=" Play " onClick='doPlayOrPause();'>
281 <INPUT type=button value="Stop" onClick='doStop();'>
283 <INPUT type=button value=" << " onClick='doPlaySlower();'>
284 <INPUT type=button value="Reverse" onClick='doReverse();'>
285 <INPUT type=button value=" >> " onClick='doPlayFaster();'>
287 <INPUT type=button value="Fullscreen" onClick='getVLC("vlc").video.toggleFullscreen();'>
288 <INPUT type=button value="Version" onClick='alert("vlc " + getVLC("vlc").VersionInfo);'>
289 <INPUT type=button value=" State " onClick='alert("state: " + getVLC("vlc").input.state);'>
290 </TD><TD align="right">
291 <SPAN style="text-align:center">Volume:</SPAN>
292 <INPUT type=button value=" - " onClick='updateVolume(-10)'>
293 <SPAN id="volumeTextField" style="text-align:center">--</SPAN>
294 <INPUT type=button value=" + " onClick='updateVolume(+10)'>
295 <INPUT type=button value="Mute" onClick='getVLC("vlc").audio.toggleMute();'>
299 <INPUT type=button value="Prev" onClick='getVLC("vlc").playlist.prev();'>
300 <INPUT type=button value="Next" onClick='getVLC("vlc").playlist.next();'>
301 <INPUT type=button value="Clear All" onClick='doPlaylistClearAll();'>
303 <SELECT readonly onChange='doAspectRatio(this.value)'>
304 <OPTION value="default">Default</OPTION>
305 <OPTION value="1:1">1:1</OPTION>
306 <OPTION value="4:3">4:3</OPTION>
307 <OPTION value="16:9">16:9</OPTION>
308 <OPTION value="221:100">221:100</OPTION>
309 <OPTION value="5:4">5:4</OPTION>
311 </TD><TD align="right">
312 <INPUT type=button id="itemCount" value=" Items 0 " onClick='doItemCount();'>
313 <INPUT size=4 value="" id="removeid"><INPUT type=submit value="Delete" onClick="doRemoveItem(document.getElementById('removeid').value);">
316 <TR><TD>Audio Channel:
317 <SELECT readonly onClick='doAudioChannel(this.value);'>
318 <OPTION value=1>Stereo</OPTION>
319 <OPTION value=2>Reverse Stereo</OPTION>
320 <OPTION value=3>Left</OPTION>
321 <OPTION value=4>Right</OPTION>
322 <OPTION value=5>Dolby</OPTION>
326 <INPUT type=button value="current channel" onClick='alert(getVLC("vlc").audio.channel);'>
329 <TR><TD> Audio Track:
330 <INPUT type=button value=" + " onClick='doAudioTrack(1);'>
331 <SPAN id="trackTextField" style="text-align:center">--</SPAN>
332 <INPUT type=button value=" - " onClick='doAudioTrack(-1);'>
333 <INPUT type=button value="current track" onClick='alert(getVLC("vlc").audio.description(vlc.audio.track));'>
334 <INPUT type=button value="number of track" onClick='alert(getVLC("vlc").audio.count);'>
337 <INPUT type=button value="set slider" onClick='doSetSlider();'>
338 <INPUT type=button value="get position" onClick='doGetPosition();'>
343 <INPUT type=button value=" + " onClick='doSubtitle(1);'>
344 <SPAN id="spuTextField" style="text-align:center">--</SPAN>
345 <INPUT type=button value=" - " onClick='doSubtitle(-1);'>
346 <INPUT type=button value="current subtitle" onClick='alert(getVLC("vlc").subtitle.description(vlc.subtitle.track));'>
347 <INPUT type=button value="number of subtitle" onClick='alert(getVLC("vlc").subtitle.count);'>
352 <INPUT type=button value="BLEND" onClick='getVLC("vlc").video.deinterlace.enable("blend");'>
353 <INPUT type=button value=" X " onClick='getVLC("vlc").video.deinterlace.enable("x");'>
354 <INPUT type=button value="Disable" onClick='getVLC("vlc").video.deinterlace.disable();'>
358 <TD>Marquee video filter:
359 <INPUT type=button value="Enable" onClick='getVLC("vlc").video.marquee.enable();'>
360 <INPUT type=button value="Disable" onClick='getVLC("vlc").video.marquee.disable();'>
361 <INPUT size=4 value="" id="marqueeIntValue">
362 <SELECT readonly onClick="doMarqueeOption(this.value,document.getElementById('marqueeIntValue').value);">
363 <OPTION value=1>Color</OPTION>
364 <OPTION value=2>Opacity</OPTION>
365 <OPTION value=3>Position</OPTION>
366 <OPTION value=4>Refresh</OPTION>
367 <OPTION value=5>Size</OPTION>
368 <OPTION value=6>Text</OPTION>
369 <OPTION value=7>Timeout</OPTION>
370 <OPTION value=8>X</OPTION>
371 <OPTION value=9>Y</OPTION>
376 <TD>Logo video filter:
377 <INPUT type=button value="Enable" onClick='getVLC("vlc").video.logo.enable();'>
378 <INPUT type=button value="Disable" onClick='getVLC("vlc").video.logo.disable();'>
379 <INPUT size=4 value="" id="logoIntValue">
380 <SELECT readonly onClick="doLogoOption(this.value,document.getElementById('logoIntValue').value);">
381 <OPTION value=1>File</OPTION>
382 <OPTION value=2>Position</OPTION>
383 <OPTION value=3>Opacity</OPTION>
384 <OPTION value=4>Repeat</OPTION>
385 <OPTION value=5>Delay</OPTION>
386 <OPTION value=6>X</OPTION>
387 <OPTION value=7>Y</OPTION>
393 <INPUT type=button id="telx" value="Teletext off" onClick='doToggleTeletext();'>
395 <INPUT size=4 value="100" id="telxPage" onClick='doTelxPage(document.getElementById("telxPage").value);'>
399 <SCRIPT language="javascript">
404 var telxState = false;
408 function setPauseable(val)
413 function setSeekable(val)
418 function doSetSlider()
420 var vlc = getVLC("vlc");
422 // set slider to new position
424 vlc.input.time = (vlc.input.length/2);
427 function doGetPosition()
429 var vlc = getVLC("vlc");
431 // set slider to new position
433 alert( "position is " + vlc.input.time);
436 function doReverse(rate)
438 var vlc = getVLC("vlc");
440 vlc.input.rate = -1.0 * vlc.input.rate;
443 function doAudioChannel(value)
445 var vlc = getVLC("vlc");
447 vlc.audio.channel = parseInt(value);
450 function doAudioTrack(value)
452 var vlc = getVLC("vlc");
455 vlc.audio.track = vlc.audio.track + value;
456 document.getElementById("trackTextField").innerHTML = vlc.audio.track;
460 function doAspectRatio(value)
462 var vlc = getVLC("vlc");
464 vlc.video.aspectRatio = value;
467 function doSubtitle(value)
469 var vlc = getVLC("vlc");
472 vlc.subtitle.track = vlc.subtitle.track + value;
473 document.getElementById("spuTextField").innerHTML = vlc.subtitle.track;
477 function doTelxPage(value)
479 var vlc = getVLC("vlc");
481 vlc.video.teletext = parseInt(value);
484 function doToggleTeletext()
486 var vlc = getVLC("vlc");
490 vlc.video.toggleTeletext();
493 document.getElementById("telx").innerHTML = "Teletext on";
498 document.getElementById("telx").innerHTML = "Teletext off";
504 function doItemCount()
506 var vlc = getVLC("vlc");
509 var count = vlc.playlist.items.count;
510 document.getElementById("itemCount").value = " Items " + count + " ";
514 function doRemoveItem(item)
516 var vlc = getVLC("vlc");
518 vlc.playlist.items.remove(item);
521 function doPlaylistClearAll()
523 var vlc = getVLC("vlc");
526 vlc.playlist.items.clear();
527 while( vlc.playlist.items.count > 0)
529 // wait till playlist empties.
535 function updateVolume(deltaVol)
537 var vlc = getVLC("vlc");
540 vlc.audio.volume += deltaVol;
541 document.getElementById("volumeTextField").innerHTML = vlc.audio.volume+"%";
545 function formatTime(timeVal)
547 if( typeof timeVal != 'number' )
550 var timeHour = Math.round(timeVal / 1000);
551 var timeSec = timeHour % 60;
553 timeSec = '0'+timeSec;
554 timeHour = (timeHour - timeSec)/60;
555 var timeMin = timeHour % 60;
557 timeMin = '0'+timeMin;
558 timeHour = (timeHour - timeMin)/60;
560 return timeHour+":"+timeMin+":"+timeSec;
562 return timeMin+":"+timeSec;
565 // Old method of querying current state
566 // function doState() - depreceated
569 var vlc = getVLC("vlc");
573 newState = vlc.input.state;
577 // current media has stopped
580 else if( newState == 1 )
582 // current media is openning/connecting
585 else if( newState == 2 )
587 // current media is buffering data
590 else if( newState == 3 )
592 // current media is now playing
595 else if( newState == 4 )
597 // current media is now paused
600 else if( newState == 5 )
602 // current media has stopped
605 else if( newState == 6 )
607 // current media has ended
610 else if( newState == 7 )
612 // current media encountered error
619 function doGo(targetURL)
621 var vlc = getVLC("vlc");
625 vlc.playlist.items.clear();
626 while( vlc.playlist.items.count > 0 )
628 // clear() may return before the playlist has actually been cleared
629 // just wait for it to finish its job
631 var options = [":rtsp-tcp"];
632 var itemId = vlc.playlist.add(targetURL,"",options);
637 vlc.playlist.playItem(itemId);
641 alert("cannot play at the moment !");
647 function doAdd(targetURL)
649 var vlc = getVLC("vlc");
650 var options = [":vout-filter=deinterlace", ":deinterlace-mode=linear"];
653 vlc.playlist.add(targetURL, "", options);
659 function doPlayOrPause()
661 var vlc = getVLC("vlc");
664 if( vlc.playlist.isPlaying && canPause )
666 vlc.playlist.togglePause();
668 else if( vlc.playlist.items.count > 0 )
674 alert('nothing to play !');
681 var vlc = getVLC("vlc");
686 function doPlaySlower()
688 var vlc = getVLC("vlc");
690 vlc.input.rate = vlc.input.rate / 2;
693 function doPlayFaster()
695 var vlc = getVLC("vlc");
697 vlc.input.rate = vlc.input.rate * 2;
700 function doMarqueeOption(option, value)
702 var vlc = getVLC("vlc");
703 val = parseInt(value);
707 vlc.video.marquee.color = val;
709 vlc.video.marquee.opacity = val;
711 vlc.video.marquee.position = value;
713 vlc.video.marquee.refresh = val;
715 vlc.video.marquee.size = val;
717 vlc.video.marquee.text = value;
719 vlc.video.marquee.timeout = val;
721 vlc.video.marquee.x = val;
723 vlc.video.marquee.y = val;
727 function doLogoOption(option, value)
729 var vlc = getVLC("vlc");
733 vlc.video.logo.file(value);
735 vlc.video.logo.position = value;
736 val = parseInt(value);
738 vlc.video.logo.opacity = val;
740 vlc.video.logo.repeat = val;
742 vlc.video.logo.delay = val;
744 vlc.video.logo.x = val;
746 vlc.video.logo.y = val;
754 document.getElementById("state").innerHTML = "Opening...";
755 document.getElementById("PlayOrPause").value = "Pause";
760 document.getElementById("state").innerHTML = "Buffering...";
761 document.getElementById("PlayOrPause").value = "Pause";
766 document.getElementById("state").innerHTML = "Playing...";
767 document.getElementById("PlayOrPause").value = "Pause";
773 document.getElementById("state").innerHTML = "End...";
776 var liveFeedText = ["Live", "((Live))", "(( Live ))", "(( Live ))"];
777 var liveFeedRoll = 0;
781 var vlc = getVLC("vlc");
782 var info = document.getElementById("info");
785 var mediaLen = vlc.input.length;
789 info.innerHTML = formatTime(vlc.input.time)+"/"+formatTime(mediaLen);
793 // non-seekable "live" media
794 liveFeedRoll = liveFeedRoll & 3;
795 info.innerHTML = liveFeedText[liveFeedRoll++];
802 document.getElementById("state").innerHTML = "Paused...";
803 document.getElementById("PlayOrPause").value = " Play ";
808 var vlc = getVLC("vlc");
810 document.getElementById("info").innerHTML = "-:--:--/-:--:--";
811 document.getElementById("state").innerHTML = "Stopped...";
812 document.getElementById("PlayOrPause").value = " Play ";
817 var vlc = getVLC("vlc");
819 document.getElementById("state").innerHTML = "Error...";