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

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