Ignore:
Timestamp:
Jul 19, 2011, 8:55:04 PM (13 years ago)
Author:
Rick van der Zwet
Message:

RadioButtons are much nicer!

File:
1 edited

Legend:

Unmodified
Added
Removed

  • py-tcpmultiplexer/htdocs/browser.html

    r320 r321  
    66<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
    77<script type="text/javascript">
    8 function createAudio(wav_uri)
     8function changeAudio(wav_uri)
    99{
    1010   $("#jplayer").jPlayer({
    1111      ready: function () {
     12         $(this).jPlayer("stop");
    1213         $(this).jPlayer("setMedia", { wav: wav_uri }).jPlayer("play");
    1314      },
    … …  
    1819      supplied: "wav"
    1920    });
    20     $("#jplayer").after($("<p>In-browser audio is running.</p>"));
    2121}
    2222
    … …  
    2727}
    2828</script>
     29
    2930</head>
    3031<body>
    3132<h1>py-tcpmultiplexer webcam server</h1>
    3233
    33 <input type="button" onclick="changeVideo('/cam1/video')" value="Click to display Cam1" />
    34 <input type="button" onclick="changeVideo('/cam2/video')" value="Click to display Cam2" />
    35 <input type="button" onclick="changeVideo('/cam3/video')" value="Click to display Cam3" />
    36 <br />
    37 <img id="player" src="img/logo.png" alt="Video feeds"/><br/>
     34<div>
     35<table>
     36<tr><td>Select WebCam:</td><td>
     37<input type="radio" name="cam" value="img/logo.png" checked="checked">None</input>
     38<input type="radio" name="cam" value="/cam1/video">Cam1</input>
     39<input type="radio" name="cam" value="/cam2/video">Cam2</input>
     40<input type="radio" name="cam" value="/cam3/video">Cam2</input>
     41<input type="radio" name="cam" value="/cam4/video">Cam2</input>
     42</td></tr>
     43<tr><td>Select Audio:</td><td>
     44<input type="radio" name="sound" value="none" checked="checked" >None</input>
     45<input type="radio" name="sound" value="/cam1/audio">Cam1</input>
     46</td></tr>
     47</table>
    3848
    39 <div id="jplayer"><br/><input type="button" onclick="createAudio('/cam1/audio')" value="Click here to play audio with browser"/><br>
     49<script type="text/javascript">
     50  $("input[name='cam']").change(function () {
     51      changeVideo($("input[name='cam']:checked").val());
     52  });
     53  $("input[name='sound']").change(function () {
     54      changeAudio($("input[name='sound']:checked").val());
     55  });
     56</script>
     57
     58<div>
     59<img id="player" src="img/logo.png"  alt="Video feeds"/><br/>
    4060</div>
     61
     62<div id="jplayer" />
    4163
    4264
Note: See TracChangeset for help on using the changeset viewer.