activex/test.html

   1 <HTML>
   2 <TITLE>VLC ActiveX plugin test page</TITLE>
   3 <BODY>
   4 <TABLE>
   5 <TR><TD colspan="2">
   6 MRL:
   7 <INPUT size="90" id="targetTextField" value="">
   8 <INPUT type=submit value="Go" onClick="doGo(document.getElementById('targetTextField').value);">
   9 </TD></TR>
  10 <TR><TD colspan="2">
  11 <!--
  12 Insert VideoLAN.VLCPlugin.2 activex control
  13 -->
  14 <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
  15         codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab#Version=0,8,6,0"
  16         width="640"
  17         height="480"
  18         id="vlc"
  19         events="True">
  20 <param name="MRL" value="" />
  21 <param name="ShowDisplay" value="True" />
  22 <param name="AutoLoop" value="False" />
  23 <param name="AutoPlay" value="False" />
  24 <param name="Volume" value="50" />
  25 <param name="StartTime" value="0" />
  26 </OBJECT>
  27 </TD></TR>
  28 <TR><TD>
  29 <!--
  30 Insert MSComctlLib.Slider.2 activex control
  31 -->
  32 <OBJECT classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628"
  33         width="540"
  34         height="20"
  35         id="slider"
  36         events="True">
  37 <param name="TickStyle" value="3" />
  38 <param name="Min" value="0" />
  39 <param name="Max" value="0" />
  40 <param name="Value" value="0" />
  41 <param name="Enabled" value="False" />
  42 </OBJECT>
  43 </TD><TD width="15%">
  44 <DIV id="info" style="text-align:center">-:--:--/-:--:--</DIV>
  45 </TD></TR>
  46 <TR><TD colspan="2">
  47 <INPUT type=button id="PlayOrPause" value=" Play " onClick='doPlayOrPause();'>
  48 <INPUT type=button value="Stop" onClick='doStop();'>
  49 &nbsp;
  50 <INPUT type=button value=" << " onClick='doPlaySlower();'>
  51 <INPUT type=button value=" >> " onClick='doPlayFaster();'>
  52 &nbsp;
  53 <INPUT type=button value="Show" onClick='document.getElementById("vlc").Visible = true;'>
  54 <INPUT type=button value="Hide" onClick='document.getElementById("vlc").Visible = false;'>
  55 &nbsp;
  56 <INPUT type=button id="VersionBut" value="Version" onClick='alert(document.getElementById("vlc").VersionInfo);'>
  57 <SPAN style="text-align:center">Volume:</SPAN>
  58 <INPUT type=button value=" - " onClick='updateVolume(-10)'>
  59 <SPAN id="volumeTextField" style="text-align: center">--</SPAN>
  60 <INPUT type=button value=" + " onClick='updateVolume(+10)'>
  61 <INPUT type=button value="Mute" onClick='document.getElementById("vlc").audio.toggleMute();'>
  62 </TD>
  63 </TR>
  64 </TABLE>
  65 <SCRIPT language="javascript">
  66 <!--
  67
  68 var prevState = 0;
  69 var monitorTimerId = 0;
  70 var sliderScrolling = false;
  71 var ignoreSliderChange = false;
  72
  73 function updateVolume(deltaVol)
  74 {
  75     var vlc = document.getElementById("vlc");
  76     vlc.audio.volume += deltaVol;
  77     document.getElementById("volumeTextField").innerHTML = vlc.audio.volume+"%";
  78 };
  79 function formatTime(timeVal)
  80 {
  81     var timeHour = Math.round(timeVal / 1000);
  82     var timeSec = timeHour % 60;
  83     if( timeSec < 10 )
  84         timeSec = '0'+timeSec;
  85     timeHour = (timeHour - timeSec)/60;
  86     var timeMin = timeHour % 60;
  87     if( timeMin < 10 )
  88         timeMin = '0'+timeMin;
  89     timeHour = (timeHour - timeMin)/60;
  90     if( timeHour > 0 )
  91         return timeHour+":"+timeMin+":"+timeSec;
  92     else
  93         return timeMin+":"+timeSec;
  94 };
  95 function monitor()
  96 {
  97     var vlc = document.getElementById("vlc");
  98     var newState = vlc.input.state;
  99     if( vlc.log.messages.count > 0 )
 100     {
 101         var iter = vlc.log.messages.iterator();
 102         while( iter.hasNext )
 103         {
 104             var msg = iter.next();
 105             alert( msg );
 106         }
 107         vlc.log.messages.clear();
 108     }
 109     if( prevState != newState )
 110     {
 111         if( newState == 0 )
 112         {
 113             // current media has stopped
 114             onStop();
 115         }
 116         else if( newState == 1 )
 117         {
 118             // current media is openning/connecting
 119             onOpen();
 120         }
 121         else if( newState == 2 )
 122         {
 123             // current media is buffering data
 124             onBuffer();
 125         }
 126         else if( newState == 3 )
 127         {
 128             // current media is now playing
 129             onPlay();
 130         }
 131         else if( vlc.input.state == 4 )
 132         {
 133             // current media is now paused
 134             onPause();
 135         }
 136         prevState = newState;
 137     }
 138     else if( newState == 3 )
 139     {
 140         // current media is playing
 141         onPlaying();
 142     }
 143     monitorTimerId = setTimeout("monitor()", 1000);
 144 };
 145
 146 /* actions */
 147
 148 function doGo(targetURL)
 149 {
 150     var vlc = document.getElementById("vlc");
 151     var options = new Array(":vout=directx");
 152     vlc.playlist.clear();
 153     //vlc.playlist.add(targetURL, null, options);
 154     vlc.playlist.add(targetURL);
 155     vlc.playlist.play();
 156     vlc.log.verbosity = 3;
 157     vlc.log.messages.clear();
 158     if( monitorTimerId == 0 )
 159     {
 160         monitor();
 161     }
 162 };
 163 function doPlayOrPause()
 164 {
 165     var vlc = document.getElementById("vlc");
 166     if( vlc.playlist.isPlaying )
 167     {
 168         vlc.playlist.togglePause();
 169     }
 170     else
 171     {
 172         vlc.log.messages.clear();
 173         vlc.playlist.play();
 174         if( monitorTimerId == 0 )
 175         {
 176             monitor();
 177         }
 178     }
 179 };
 180 function doStop()
 181 {
 182     document.getElementById("vlc").playlist.stop();
 183     if( monitorTimerId != 0 )
 184     {
 185         clearTimeout(monitorTimerId);
 186         monitorTimerId = 0;
 187     }
 188     onStop();
 189 };
 190 function doPlaySlower()
 191 {
 192     var vlc = document.getElementById("vlc");
 193     vlc.input.rate = vlc.input.rate / 2;
 194 };
 195 function doPlayFaster()
 196 {
 197     var vlc = document.getElementById("vlc");
 198     vlc.input.rate = vlc.input.rate * 2;
 199 };
 200
 201 /* events */
 202
 203 function onOpen()
 204 {
 205     document.getElementById("info").innerHTML = "Opening...";
 206     document.getElementById("PlayOrPause").value = "Pause";
 207 };
 208 function onBuffer()
 209 {
 210     document.getElementById("info").innerHTML = "Buffering...";
 211     document.getElementById("PlayOrPause").value = "Pause";
 212 };
 213 function onPlay()
 214 {
 215     onPlaying();
 216     document.getElementById("PlayOrPause").value = "Pause";
 217 };
 218 var liveFeedText = new Array("Live", "((Live))", "(( Live ))", "((  Live  ))");
 219 var liveFeedRoll = 0;
 220 function onPlaying()
 221 {
 222     if( ! sliderScrolling )
 223     {
 224         var slider = document.getElementById("slider");
 225         if( vlc.input.length > 0 )
 226         {
 227             // seekable media
 228             slider.Enabled = true;
 229             slider.Max = slider.width;
 230             ignoreSliderChange = true;
 231             slider.Value = vlc.input.position*slider.width;
 232             ignoreSliderChange = false;
 233             document.getElementById("info").innerHTML = formatTime(vlc.input.time)+"/"+formatTime(vlc.input.length);
 234         }
 235         else
 236         {
 237             // non-seekable "live" media
 238             if( slider.Enabled )
 239             {
 240                 slider.Value = slider.Min;
 241                 slider.Enabled = false;
 242             }
 243             liveFeedRoll = liveFeedRoll & 3;
 244             document.getElementById("info").innerHTML = liveFeedText[liveFeedRoll++];
 245         }
 246     }
 247 };
 248 function onPause()
 249 {
 250     document.getElementById("PlayOrPause").value = " Play ";
 251 };
 252 function onStop()
 253 {
 254     vlc.log.verbosity = -1;
 255     if( slider.Enabled )
 256     {
 257         slider.Value = slider.Min;
 258         slider.Enabled = false;
 259     }
 260     document.getElementById("info").innerHTML = "-:--:--/-:--:--";
 261     document.getElementById("PlayOrPause").value = " Play ";
 262 };
 263 //-->
 264 </SCRIPT>
 265 <SCRIPT language="JScript">
 266 <!--
 267
 268 document.onreadystatechange=onVLCStateChange;
 269 function onVLCStateChange()
 270 {
 271     if( document.readyState == 'complete' )
 272     {
 273         updateVolume(0);
 274     }
 275 };
 276 function slider::Scroll()
 277 {
 278     var vlc = document.getElementById("vlc");
 279     var slider = document.getElementById("slider");
 280     var oldPos = vlc.input.position;
 281     var newPos = slider.Value/slider.width;
 282     if( (vlc.input.state == 3) && (oldPos != newPos) )
 283     {
 284         vlc.input.position = newPos;
 285         slider.Text = formatTime(vlc.input.time);
 286         document.getElementById("info").innerHTML = slider.Text+"/"+formatTime(vlc.input.length);
 287     }
 288     sliderScrolling = true;
 289 };
 290 function slider::Change()
 291 {
 292     var vlc = document.getElementById("vlc");
 293     var slider = document.getElementById("slider");
 294     var oldPos = vlc.input.position;
 295     var newPos = slider.Value/slider.width;
 296     if( sliderScrolling )
 297     {
 298         sliderScrolling = false;
 299     }
 300     else if( !ignoreSliderChange && (vlc.input.state == 3) && (oldPos != newPos) )
 301     {
 302         vlc.input.position = newPos;
 303     }
 304 };
 305 //-->
 306 </SCRIPT>
 307 </BODY>
 308 </HTML>