git.sesse.net Git - vlc/blob - share/http/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2
   3 <!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
   4 <  index.html: VLC media player web interface
   5 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
   6 <  Copyright (C) 2005 the VideoLAN team
   7 <  $Id$
   8 <
   9 <  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
  10 <
  11 <  This program is free software; you can redistribute it and/or modify
  12 <  it under the terms of the GNU General Public License as published by
  13 <  the Free Software Foundation; either version 2 of the License, or
  14 <  (at your option) any later version.
  15 <
  16 <  This program is distributed in the hope that it will be useful,
  17 <  but WITHOUT ANY WARRANTY; without even the implied warranty of
  18 <  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  19 <  GNU General Public License for more details.
  20 <
  21 <  You should have received a copy of the GNU General Public License
  22 <  along with this program; if not, write to the Free Software
  23 <  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
  24 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  25
  26 <html xmlns="http://www.w3.org/1999/xhtml">
  27
  28 <head>
  29
  30   <title>VLC media player - Web Interface</title>
  31   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  32   <link href="style.css" rel="stylesheet" type="text/css" />
  33   <script type="text/javascript" src="functions.js"></script>
  34
  35   <!-- in case people had scripts that sent commands to the default
  36        index.html page -->
  37   <vlc id="control" param1="stop,pause,previous,next,add,sout,play,delete,empty,seek,fullscreen,keep,volume,sort,move" />
  38
  39 </head>
  40
  41 <body onload="loop_refresh();">
  42
  43 <div id="browse" style="display: none;">
  44   <div class="title">
  45     Browse
  46   </div>
  47   <div id="browser">
  48     <a href="javascript:browse_dir(document.getElementById( 'browse_lastdir' ).value);">Lets browse !</a>
  49   </div>
  50   <div class="controls">
  51     <button id="btn_browse_close" onclick="hide('browse');">
  52       Close
  53     </button>
  54     <input type="hidden" id="browse_lastdir" value="~" />
  55     <input type="hidden" id="browse_dest" value="" />
  56   </div>
  57 </div>
  58
  59 <div id="main">
  60   <div class="title">
  61     VLC media player
  62     <button id="btn_toggle_text" onclick="toggle_btn_text();">
  63       <img src="images/help.png" alt="Help" />
  64       Help
  65     </button>
  66   </div>
  67   <div class="controls">
  68     <button id="btn_open" onclick="toggle_show('input');" onmouseover="button_over(this);" onmouseout="button_out(this);">
  69       <img src="images/eject.png" alt="Open" />
  70       <span class="btn_text">Open</span>
  71     </button>
  72     &nbsp;
  73     <button id="btn_stop" onclick="pl_stop();" onmouseover="button_over(this);" onmouseout="button_out(this);">
  74       <img src="images/stop.png" alt="Stop" />
  75       <span class="btn_text">Stop</span>
  76     </button>
  77     <!--<button id="btn_play" onclick="alert('FIXME');" onmouseover="button_over(this);" onmouseout="button_out(this);">
  78       <img src="images/play.png" alt="Play" />
  79       <span class="btn_text">Play</span>
  80     </button>-->
  81     <button id="btn_pause" onclick="pl_pause();" onmouseover="button_over(this);" onmouseout="button_out(this);">
  82       <img src="images/pause.png" alt="Pause" id="btn_pause_img" />
  83       <span class="btn_text">Pause</span>
  84     </button>
  85     &nbsp;
  86     <button id="btn_previous" onclick="pl_previous();" onmouseover="button_over(this);" onmouseout="button_out(this);">
  87       <img src="images/prev.png" alt="Previous" />
  88       <span class="btn_text">Previous</span>
  89     </button>
  90     <button id="btn_next" onclick="pl_next();" onmouseover="button_over(this);" onmouseout="button_out(this);">
  91       <img src="images/next.png" alt="Next" />
  92       <span class="btn_text">Next</span>
  93     </button>
  94     &nbsp;
  95     <button id="btn_sout" onclick="toggle_show('sout');" onmouseover="button_over(this);" onmouseout="button_out(this);">
  96       <img src="images/sout.png" alt="Stream Output" />
  97       <span class="btn_text">Stream Output</span>
  98     </button>
  99     <button id="btn_playlist" onclick="toggle_show('playlist');" onmouseover="button_over(this);" onmouseout="button_out(this);">
 100       <img src="images/playlist.png" alt="Playlist" />
 101       <span class="btn_text">Playlist</span>
 102     </button>
 103     &nbsp;
 104     <button id="btn_fullscreen" onclick="fullscreen();" onmouseover="button_over(this);" onmouseout="button_out(this);">
 105       <img src="images/fullscreen.png" alt="Fullscreen" />
 106       <span class="btn_text">Fullscreen</span>
 107     </button>
 108     &nbsp;
 109     <button id="btn_volume_down" onclick="volume_down();" onmouseover="button_over(this);" onmouseout="button_out(this);">
 110       <img src="images/volume_down.png" alt="Decrease Volume" />
 111       <span class="btn_text">Decrease Volume</span>
 112     </button>
 113     <button id="btn_volume_up" onclick="volume_up();" onmouseover="button_over(this);" onmouseout="button_out(this);">
 114       <img src="images/volume_up.png" alt="Increase Volume" />
 115       <span class="btn_text">Increase Volume</span>
 116     </button>
 117   </div>
 118   <div id="status">
 119     <span id="state">(?)</span>
 120     -
 121     Time : <span id="time">(?)</span>/<span id="length">(?)</span>
 122     -
 123     Volume : <span id="volume">(?)</span>
 124     <br/>
 125     <span id="nowplaying">(?)</span>
 126   </div>
 127 </div>
 128
 129 <div id="input" style="display: none">
 130   <div class="title">
 131     Input
 132   </div>
 133   <div class="controls">
 134     <label for="input_mrl">Input (MRL)</label>
 135     <input type="text" name="input_mrl" id="input_mrl" size="60" onkeypress="if( event.keyCode == 13 ) in_play();"/>
 136     <input type="button" value="Play" onclick="in_play();" />
 137     <input type="button" value="Enqueue" onclick="in_enqueue();" />
 138     <br/>
 139     <!--<button id="btn_inhide" onclick="hide_input();">
 140       Hide
 141     </button>-->
 142     <button id="btn_file" onclick="hide_input();show('input_file');update_input_file();">
 143       File
 144     </button>
 145     <button id="btn_disc" onclick="hide_input();show('input_disc');update_input_disc();">
 146       Disc
 147     </button>
 148     <button id="btn_network" onclick="hide_input();show('input_network');update_input_net();">
 149       Network
 150     </button>
 151   </div>
 152   <div id="input_helper">
 153     <div id="input_file" style="display: block">
 154       Open File
 155       <hr/>
 156       <label for="input_file_filename">File name</label>
 157       <input type="text" id="input_file_filename" size="60" onchange="update_input_file();" onfocus="update_input_file();"/>
 158       <input type="button" id="input_file_browse" value="Browse" onclick="browse( 'input_file_filename' );" />
 159       <hr/>
 160       <input type="checkbox" id="input_sub_options" />
 161       <label for="input_sub_options">Subtitle options *TODO/FIXME/FIXHTTPD*</label>
 162       <br/>
 163       <label for="input_sub_file">Subtitles file</label>
 164       <input type="text" id="input_sub_file" size="60" />
 165       <br/><!-- TODO -->
 166       <label for="input_sub_enc">Subtitles encoding</label>
 167       <select id="input_sub_enc">
 168         <option></option>
 169       </select>
 170       <br/>
 171       <label for="input_sub_size">Font size</label>
 172       <select id="input_sub_size">
 173         <option></option>
 174       </select>
 175       <label for="input_sub_justification">Justification</label>
 176       <select id="input_sub_justification">
 177         <option></option>
 178       </select>
 179       <br/>
 180       <label for="input_sub_fps">Frames per second</label>
 181       <input type="text" id="input_sub_fps" />
 182       <label for="input_sub_delay">Delay</label>
 183       <input type="text" id="input_sub_delay" />
 184     </div>
 185     <div id="input_disc" style="display: none">
 186       Open Disc
 187       <hr/>
 188       Disc type :
 189       <input type="radio" name="input_disc_type" id="input_disc_dvdmenu" value="dvd" onchange="update_input_disc();" />
 190       <label for="input_disc_dvdmenu">DVD (menus)</label>
 191       <input type="radio" name="input_disc_type" id="input_disc_dvd" value="dvdsimple" onchange="update_input_disc();" />
 192       <label for="input_disc_dvd">DVD</label>
 193       <input type="radio" name="input_disc_type" id="input_disc_vcd" value="vcd" onchange="update_input_disc();" />
 194       <label for="input_disc_vcd">VCD</label>
 195       <input type="radio" name="input_disc_type" id="input_disc_cdda" value="cdda" onchange="update_input_disc();" />
 196       <label for="input_disc_cdda">Audio CD</label>
 197       <hr/>
 198       <table>
 199         <tr>
 200           <td>
 201             <label for="input_disc_dev">Device name</label>
 202           </td>
 203           <td>
 204             <input type="text" id="input_disc_dev" onchange="update_input_disc();" />
 205           </td>
 206         </tr>
 207         <tr>
 208           <td>
 209             <label for="input_disc_title">Title</label>
 210           </td>
 211           <td>
 212             <input type="text" id="input_disc_title" onchange="update_input_disc();" />
 213           </td>
 214         </tr>
 215         <tr>
 216           <td>
 217             <label for="input_disc_chapter">Chapter</label>
 218           </td>
 219           <td>
 220             <input type="text" id="input_disc_chapter" onchange="update_input_disc();" />
 221           </td>
 222         </tr>
 223         <tr>
 224           <td>
 225             <label for="input_disc_subtrack">Subtitles track</label>
 226           </td>
 227           <td>
 228              <input type="text" id="input_disc_subtrack" onchange="update_input_disc();" />
 229           </td>
 230         </tr>
 231         <tr>
 232           <td>
 233             <label for="input_disc_audiotrack">Audio track</label>
 234           </td>
 235           <td>
 236             <input type="text" id="input_disc_audiotrack" onchange="update_input_disc();" />
 237           </td>
 238         </tr>
 239       </table>
 240     </div>
 241     <div id="input_network" style="display: none">
 242       Open Network
 243       <hr/>
 244       <table>
 245         <tr>
 246           <td>
 247             <input type="radio" name="input_net_type" id="input_net_udp" value="udp" onchange="update_input_net();" />
 248             <label for="input_net_udp">UDP/RTP</label>
 249           </td>
 250           <td>
 251             <label for="input_net_udp_port">Port</label>
 252             <input type="text" id="input_net_udp_port" size="6" onchange="update_input_net();" />
 253             <input type="checkbox" id="input_net_udp_forceipv6" onchange="update_input_net();" />
 254             <label for="input_net_udp_forceipv6">Force IPv6</label>
 255           </td>
 256         </tr>
 257         <tr>
 258           <td>
 259             <input type="radio" name="input_net_type" id="input_net_udpmcast" value="udpmcast" onchange="update_input_net();" />
 260             <label for="input_net_udpmcast">UDP/RTP Multicast</label>
 261           </td>
 262           <td>
 263             <label for="input_net_udpmcast_address">Address</label>
 264             <input type="text" id="input_net_udpmcast_address" onchange="update_input_net();" />
 265             <label for="input_net_udpmcast_port">Port</label>
 266             <input type="text" id="input_net_udpmcast_port" size="6" onchange="update_input_net();" />
 267           </td>
 268         </tr>
 269         <tr>
 270           <td>
 271             <input type="radio" name="input_net_type" id="input_net_http" value="http" onchange="update_input_net();" />
 272             <label for="input_net_http">HTTP/HTTPS/FTP/MMS</label>
 273           </td>
 274           <td>
 275             <label for="input_net_http_url">URL</label>
 276             <input type="text" id="input_net_http_url" onchange="update_input_net();" />
 277           </td>
 278         </tr>
 279         <tr>
 280           <td>
 281             <input type="radio" name="input_net_type" id="input_net_rtsp" value="rtsp" onchange="update_input_net();" />
 282             <label for="input_net_rtsp">RTSP</label>
 283           </td>
 284           <td>
 285             <label for="input_net_rtsp_url">URL</label>
 286             <input type="text" id="input_net_rtsp_url" value="rtsp://" onchange="update_input_net();" />
 287           </td>
 288         </tr>
 289         <tr>
 290           <td>
 291             <input type="checkbox" id="input_net_timeshift" onchange="update_input_net();" />
 292             <label for="input_net_timeshift">Allow timeshifting</label>
 293           </td>
 294           <td></td>
 295         </tr>
 296       </table>
 297     </div>
 298   </div>
 299 </div>
 300
 301 <div id="sout" style="display: none">
 302   <div class="title">
 303     Stream Output
 304   </div>
 305   <div class="controls">
 306     <label for="sout_mrl">Destination (MRL)</label>
 307     <input type="text" name="sout_mrl" id="sout_mrl" size="60" />
 308     <br/>
 309     <input type="submit" value="Save" onclick="save_sout();" />
 310     <input type="button" value="Cancel" onclick="reset_sout();"/>
 311     <input type="hidden" id="sout_old_mrl" value="" /> <!-- FIXME -->
 312     <input type="button" id="sout_helper_toggle" onclick="toggle_show_sout_helper()" value="Full sout interface" />
 313   </div>
 314   <div id="sout_helper" style="display: none;" >
 315     Stream Output Helper
 316     <hr/>
 317     <div id="sout_method">
 318       <table>
 319         <tr>
 320           <td>
 321             <input type="checkbox" id="sout_display" onchange="update_sout()"/>
 322             <label for="sout_display">Display</label>
 323           </td>
 324           <td></td>
 325           <td></td>
 326         </tr>
 327         <tr>
 328           <td>
 329             <input type="checkbox" id="sout_file" onchange="update_sout()"/>
 330             <label for="sout_file">File</label>
 331           </td>
 332           <td>
 333             <label for="sout_file_filename">File name</label>
 334             <input type="text" id="sout_file_filename" onchange="update_sout()"/>
 335           </td>
 336           <td></td>
 337         </tr>
 338         <tr>
 339           <td>
 340             <input type="checkbox" id="sout_http" onchange="update_sout()"/>
 341             <label for="sout_http">HTTP</label>
 342           </td>
 343           <td>
 344             <label for="sout_http_addr">Address</label>
 345             <input type="text" id="sout_http_addr" onchange="update_sout()"/>
 346           </td>
 347           <td>
 348             <label for="sout_http_port">Port</label>
 349             <input type="text" id="sout_http_port" onchange="update_sout()"/>
 350           </td>
 351         </tr>
 352         <tr>
 353           <td>
 354             <input type="checkbox" id="sout_mmsh" onchange="update_sout()"/>
 355             <label for="sout_mmsh">MMSH</label>
 356           </td>
 357           <td>
 358             <label for="sout_mmsh_addr">Address</label>
 359             <input type="text" id="sout_mmsh_addr" onchange="update_sout()"/>
 360           </td>
 361           <td>
 362             <label for="sout_mmsh_port">Port</label>
 363             <input type="text" id="sout_mmsh_port" onchange="update_sout()"/>
 364           </td>
 365         </tr>
 366         <tr>
 367           <td>
 368             <input type="checkbox" id="sout_rtp" onchange="update_sout()"/>
 369             <label for="sout_rtp">RTP</label>
 370           </td>
 371           <td>
 372             <label for="sout_rtp_addr">Address</label>
 373             <input type="text" id="sout_rtp_addr" onchange="update_sout()"/>
 374           </td>
 375           <td>
 376             <label for="sout_rtp_port">Port</label>
 377             <input type="text" id="sout_rtp_port" onchange="update_sout()"/>
 378           </td>
 379         </tr>
 380         <tr>
 381           <td>
 382             <input type="checkbox" id="sout_udp" onchange="update_sout()"/>
 383             <label for="sout_udp">UDP</label>
 384           </td>
 385           <td>
 386             <label for="sout_udp_addr">Address</label>
 387             <input type="text" id="sout_udp_addr" onchange="update_sout()"/>
 388           </td>
 389           <td>
 390             <label for="sout_udp_port">Port</label>
 391             <input type="text" id="sout_udp_port" onchange="update_sout()"/>
 392           </td>
 393         </tr>
 394       </table>
 395     </div>
 396     <hr/>
 397     <div id="sout_muxh">
 398       <input type="radio" name="sout_mux" id="sout_mux_default" value="" onchange="update_sout()" />
 399       <label for="sout_mux_default">Default</label>
 400       <input type="radio" name="sout_mux" id="sout_mux_ts" value="ts" onchange="update_sout()"/>
 401       <label for="sout_mux_ts">MPEG TS</label>
 402       <input type="radio" name="sout_mux" id="sout_mux_ps" value="ps" onchange="update_sout()"/>
 403       <label for="sout_mux_ps">MPEG PS</label>
 404       <input type="radio" name="sout_mux" id="sout_mux_mpeg1" value="mpeg1" onchange="update_sout()"/>
 405       <label for="sout_mux_ts">MPEG 1</label>
 406       <input type="radio" name="sout_mux" id="sout_mux_ogg" value="ogg" onchange="update_sout()"/>
 407       <label for="sout_mux_ts">OGG</label>
 408       <br/>
 409       <input type="radio" name="sout_mux" id="sout_mux_asf" value="asf" onchange="update_sout()"/>
 410       <label for="sout_mux_ts">ASF</label>
 411       <input type="radio" name="sout_mux" id="sout_mux_mp4" value="mp4" onchange="update_sout()"/>
 412       <label for="sout_mux_ts">MP4</label>
 413       <input type="radio" name="sout_mux" id="sout_mux_mov" value="mov" onchange="update_sout()"/>
 414       <label for="sout_mux_ts">MOV</label>
 415       <input type="radio" name="sout_mux" id="sout_mux_wav" value="wav" onchange="update_sout()"/>
 416       <label for="sout_mux_ts">WAV</label>
 417       <input type="radio" name="sout_mux" id="sout_mux_raw" value="raw" onchange="update_sout()"/>
 418       <label for="sout_mux_ts">Raw</label>
 419     </div>
 420     <hr/>
 421     <div id="sout_transcode">
 422       <table>
 423         <tr>
 424           <td>
 425             <input type="checkbox" id="sout_vcodec_s" onchange="update_sout()"/>
 426             <label for="sout_vcodec_s">Video Codec</label>
 427           </td>
 428           <td>
 429             <select id="sout_vcodec" onchange="update_sout()">
 430               <option value="mp1v">mp1v</option>
 431               <option value="mp2v">mp2v</option>
 432               <option value="mp4v">mp4v</option>
 433               <option value="DIV1">DIV1</option>
 434               <option value="DIV2">DIV2</option>
 435               <option value="DIV3">DIV3</option>
 436               <option value="H263">H263</option>
 437               <option value="H264">H264</option>
 438               <option value="WMV1">WMV1</option>
 439               <option value="WMV2">WMV2</option>
 440               <option value="MJPG">MJPG</option>
 441               <option value="theo">theo</option>
 442             </select>
 443           </td>
 444           <td>
 445             <label for="sout_vb">Bitrate (kb/s)</label>
 446             <select id="sout_vb" onchange="update_sout()">
 447               <option value="4096">4096</option>
 448               <option value="3072">3072</option>
 449               <option value="2048">2048</option>
 450               <option value="1024">1024</option>
 451               <option value="768">768</option>
 452               <option value="512">512</option>
 453               <option value="384">384</option>
 454               <option value="256">256</option>
 455               <option value="192">192</option>
 456               <option value="128">128</option>
 457               <option value="96">96</option>
 458               <option value="64">64</option>
 459               <option value="32">32</option>
 460               <option value="16">16</option>
 461             </select>
 462           </td>
 463           <td>
 464             <label for="sout_scale">Scale</label>
 465             <select id="sout_scale" onchange="update_sout()">
 466               <option value="0.25">0.25</option>
 467               <option value="0.5">0.5</option>
 468               <option value="0.75">0.75</option>
 469               <option value="1" selected="selected">1</option>
 470               <option value="1.25">1.25</option>
 471               <option value="1.5">1.5</option>
 472               <option value="1.75">1.75</option>
 473               <option value="2">2</option>
 474             </select>
 475           </td>
 476         </tr>
 477         <tr>
 478           <td>
 479             <input type="checkbox" id="sout_acodec_s" onchange="update_sout()"/>
 480             <label for="sout_acodec_s">Audio Codec</label>
 481           </td>
 482           <td>
 483             <select id="sout_acodec" onchange="update_sout()">
 484               <option value="mpga">mpga</option>
 485               <option value="mp2a">mp2a</option>
 486               <option value="mp3">mp3</option>
 487               <option value="mp4a">mp4a</option>
 488               <option value="a42">a52</option>
 489               <option value="vorb">vorb</option>
 490               <option value="flac">flac</option>
 491               <option value="spx">spx</option>
 492               <option value="s16l">s16l</option>
 493               <option value="fl32">fl32</option>
 494             </select>
 495           </td>
 496           <td>
 497             <label for="sout_ab">Bitrate (kb/s)</label>
 498             <select id="sout_ab" onchange="update_sout()">
 499               <option value="512">512</option>
 500               <option value="384">384</option>
 501               <option value="256">256</option>
 502               <option value="192">192</option>
 503               <option value="128">128</option>
 504               <option value="96">96</option>
 505               <option value="64">64</option>
 506               <option value="32">32</option>
 507               <option value="16">16</option>
 508             </select>
 509           </td>
 510           <td>
 511             <label for="sout_channels">Channels</label>
 512             <select id="sout_channels" onchange="update_sout()">
 513               <option value="">default</option>
 514               <option value="1">1</option>
 515               <option value="2">2</option>
 516               <option value="4">4</option>
 517               <option value="6">6</option>
 518             </select>
 519           </td>
 520         </tr>
 521         <tr>
 522           <td>
 523             <input type="checkbox" id="sout_sub" onchange="update_sout()"/>
 524             <label for="sout_sub">Subtitles Codec</label>
 525           </td>
 526           <td>
 527             <select id="sout_scodec" onchange="update_sout()">
 528               <option value="dvbs">dvbs</option>
 529             </select>
 530           </td>
 531           <td colspan="2">
 532             <input type="checkbox" id="sout_soverlay" onchange="update_sout()"/>
 533             <label for="sout_soverlay">Subtitles overlay</label>
 534           </td>
 535         </tr>
 536       </table>
 537     </div>
 538     <hr/>
 539     <div id="sout_misc">
 540       <input type="checkbox" id="sout_sap" onchange="update_sout()"/>
 541       <label for="sout_sap">SAP announce</label>
 542       <br/>
 543       <label for="sout_sap_group">Group name</label>
 544       <input type="text" id="sout_sap_group" onchange="update_sout()"/>
 545       <label for="sout_sap_name">Channel name</label>
 546       <input type="text" id="sout_sap_name" onchange="update_sout()"/>
 547       <hr/>
 548       <input type="checkbox" id="sout_all" onchange="update_sout()"/>
 549       <label for="sout_all">Select all elementary streams</label>
 550       <hr/>
 551       <label for="sout_ttl">Time-To-Live (TTL)</label>
 552       <input type="text" id="sout_ttl" onchange="update_sout()"/>
 553     </div>
 554   </div>
 555 </div>
 556
 557 <div id="playlist">
 558   <div class="title">
 559     Playlist
 560   </div>
 561   <div class="controls">
 562     <!--<button id="btn_delete" onmouseover="button_over(this);" onmouseout="button_out(this);">
 563       <img src="images/delete.png" alt="Delete" />
 564       <span class="btn_text">Delete</span>
 565     </button>-->
 566     <button id="btn_empty" onclick="pl_empty();" onmouseover="button_over(this);" onmouseout="button_out(this);">
 567       <img src="images/empty.png" alt="Empty" />
 568       <span class="btn_text">Empty</span>
 569     </button>
 570     &nbsp;
 571     <button id="btn_sort" onclick="pl_sort();" onmouseover="button_over(this);" onmouseout="button_out(this);">
 572       <img src="images/sort.png" alt="Sort" />
 573       <span class="btn_text">Sort</span>
 574     </button>
 575     &nbsp;
 576     <button id="btn_shuffle" onclick="pl_shuffle();" onmouseover="button_over(this);" onmouseout="button_out(this);">
 577       <img src="images/shuffle.png" alt="Shuffle" />
 578       <span class="btn_text">Shuffle</span>
 579     </button>
 580     <button id="btn_loop" onclick="pl_loop();" onmouseover="button_over(this);" onmouseout="button_out(this);">
 581       <img src="images/loop.png" alt="Loop" />
 582       <span class="btn_text">Loop</span>
 583     </button>
 584     <button id="btn_repeat" onclick="pl_repeat();" onmouseover="button_over(this);" onmouseout="button_out(this);">
 585       <img src="images/repeat.png" alt="Repeat" />
 586       <span class="btn_text">Repeat</span>
 587     </button>
 588   </div>
 589   <div id="playtree">
 590     (?)
 591   </div>
 592 </div>
 593
 594 <div id="footer">
 595   <vlc id="value" param1="copyright" />
 596 </div>
 597
 598 </body>
 599
 600 </html>