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