* playlist improvements :
[vlc.git] / 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>