项目记录一： python SimpleHTTPServer

python 写简单的服务器server.py：

 1 import SimpleHTTPServer
 2 import SocketServer
 3 import cgi
 4 
 5 host = ''
 6 port = 8080
 7 
 8 
 9 class simpleHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
10     def do_POST(self):
11         try:
12             
13             form = cgi.FieldStorage(
14                                     fp = self.rfile,
15                                     headers = self.headers,
16                                     environ = {
17                                                'REQUEST_METHOD':'POST',
18                                                'CONTENT_TYPE':self.headers.getheader('current-type')
19                                                }    
20                                     )
21         
22 
23             print form
24     
25 
26         except IOError:
27             self.send_error(404, ' POST error');
28 
29  
30 conn = SocketServer.TCPServer((host, port), simpleHandler)
31 
32 
33 print 'start server at port:', port
34 
35 conn.serve_forever()

index.html:

  1 <html>
  2     <head>
  3         <title>HTML5 video</title>
  4         <link type='text/css' rel='stylesheet' href='style.css'>
  5         <script src='script.js' type='application/javascript'></script>
  6     </head>
  7     
  8     <body>
  9         <div id='userInfoDiv'>
 10             <form id='userInfoForm'>
 11                 userName:<input type='text' value='default' id='userName'>
 12                 password:<input type='text' value='pwd' id='pwd'>
 13             </form>
 14         </div>
 15         
 16         
 17         <div id='container'>
 18             <div id='videoDiv'>
 19                 <video id='video_1' poster="newtest.jpg" preload="none" loop='loop' controls='controls'>
 20                     <source src='newtest.webm' type='video/webm' id='webm'></source>
 21                     <source src='newtest.ogv' type='video/ogv' id='ogv'></source>
 22                     <source src='newtest.mo4' type='video/mp4' id='mp4'></source>
 23                     <p>Your browser does not support HTML5 video</p>
 24                 </video>
 25             </div>
 26             
 27             <div id='buttonsDiv'>
 28                 <button type='button' onclick="media.load()">Load</button>
 29                 <button type='button' onclick="media.play()">Play</button>
 30                 <button type='button' onclick="media.pause()">Pause</button><br>
 31                 <button type='button' onclick="media.currentTime+=5">currentTime+=5</button>
 32                 <button type='button' onclick="media.currentTime-=5">currentTime-=5</button>
 33                 <button type='button' onclick="media.playbackRate++">playbackRate++</button>
 34                 <button type='button' onclick="media.playbackRate--">playbackRate--</button><br>
 35                 <button type='button' onclick="media.volume+=0.1">volume+=0.1</button>
 36                 <button type='button' onclick="media.volume-=0.1">volume-=0.1</button>
 37                 <button type='button' onclick="media.muted=true">muted=true</button>
 38                 <button type='button' onclick="media.muted=false">muted=false</button>
 39                 <button type='button' onclick='switchVideo()'>switchVideo</button><br>
 40                 <button type='button' onclick='sum_up()'>Summing up</button>
 41             </div>
 42         </div>
 43         
 44         <div id='userDiv'>
 45         </div>
 46         <div id='msgPlayDiv'>
 47         </div>
 48         <div id='msgPauseDiv'>
 49         </div>
 50         
 51         <table id='mediaEvent' border='1' cellpadding="10" cellspacing="10">
 52             <caption> Media Event</caption>
 53             <tbody id='events'>
 54                 <tr>
 55                     <th>loadstart</th>
 56                     <td id='e_loadstart' class='true'>1</td>
 57                     <th>progress</th>
 58                     <td id='e_progress' >0</td>
 59                     <th>suspend</th>
 60                     <td id='e_suspend' >0</td>
 61                     <th>abort</th>
 62                     <td id='e_abort' >0</td>
 63                     <th>error</th>
 64                     <td id='e_error' >0</td>
 65                 </tr>
 66                 <tr>
 67                     <th>emptied</th>
 68                     <td id='e_emptied' >0</td>
 69                     <th>stalled</th>
 70                     <td id='e_stalled' >0</td>
 71                     <th>loadedmetadata</th>
 72                     <td id='e_loadedmetadata' >0</td>
 73                     <th>loadeddata</th>
 74                     <td id='e_loadeddata' >0</td>
 75                     <th>canplay</th>
 76                     <td id='e_canplay' >0</td>
 77                 </tr>
 78                 <tr>
 79                     <th>canplaythrough</th>
 80                     <td id='e_canplaythrough' >0</td>
 81                     <th>playing</th>
 82                     <td id='e_playing' >0</td>
 83                     <th>waiting</th>
 84                     <td id='e_waiting' >0</td>
 85                     <th>seeking</th>
 86                     <td id='e_seeking' >0</td>
 87                     <th>seeked</th>
 88                     <td id='e_seeked' >0</td>                    
 89                 </tr>
 90                 <tr>
 91                     <th>ended</th>
 92                     <td id='e_ended' >0</td>
 93                     <th>durationchange</th>
 94                     <td id='e_durationchange' >0</td>
 95                     <th>timeupdate</th>
 96                     <td id='e_timeupdate' >0</td>
 97                     <th>play</th>
 98                     <td id='e_play' >0</td>
 99                     <th>pause</th>
100                     <td id='e_pause' >0</td>
101                 </tr>
102                 <tr>
103                     <th>ratechange</th>
104                     <td id='e_ratechange' >0</td>
105                     <th>volumechange</th>
106                     <td id='e_volumechange' >0</td>
107                 </tr>
108             </tbody>
109         </table>
110         
111         <table id='propertyTable' border="1" cellpadding="10" cellspacing="10">
112             <caption>Media Properties</caption>
113             <tbody id="properties">
114                 <tr>
115                     <th>error</th>
116                     <td id="p_error" class="true">none</td>
117                     <th>src</th>
118                     <td id="p_src" class="true">none</td>
119                     <th>currentSrc</th>
120                     <td id="p_currentSrc" class="true">none</td>
121                 </tr>
122                 <tr>
123                     <th>crossOrigin</th>
124                     <td id="p_crossOrigin" class="false">undefined</td>
125                     <th>networkState</th>
126                     <td id="p_networkState" class="true">0</td>
127                     <th>preload</th>
128                     <td id="p_preload" class="true">none</td>
129                 </tr>
130                 <tr>
131                     <th>buffered</th>
132                     <td id="p_buffered" class="true">[object TimeRanges]</td>
133                     <th>readyState</th>
134                     <td id="p_readyState" class="true">0</td>
135                     <th>seeking</th>
136                     <td id="p_seeking" class="true">false</td>
137                 </tr>
138                 <tr>
139                     <th>currentTime</th>
140                     <td id="p_currentTime" class="true">0</td>
141                     <th>duration</th>
142                     <td id="p_duration" class="true">NaN</td>
143                     <th>startDate</th>
144                     <td id="p_startDate" class="false">undefined</td>
145                 </tr>
146                 <tr>
147                     <th>paused</th>
148                     <td id="p_paused" class="true">true</td>
149                     <th>defaultPlaybackRate</th>
150                     <td id="p_defaultPlaybackRate" class="false">undefined</td>
151                     <th>playbackRate</th>
152                     <td id="p_playbackRate" class="false">undefined</td>
153                 </tr>
154                 <tr>
155                     <th>played</th>
156                     <td id="p_played" class="true">[object TimeRanges]</td>
157                     <th>seekable</th>
158                     <td id="p_seekable" class="true">[object TimeRanges]</td>
159                     <th>ended</th>
160                     <td id="p_ended" class="true">false</td>
161                 </tr>
162                 <tr>
163                     <th>autoplay</th>
164                     <td id="p_autoplay" class="true">false</td>
165                     <th>loop</th>
166                     <td id="p_loop" class="true">false</td>
167                     <th>mediaGroup</th>
168                     <td id="p_mediaGroup" class="false">undefined</td>
169                 </tr>
170                 <tr>
171                     <th>controller</th>
172                     <td id="p_controller" class="false">undefined</td>
173                     <th>controls</th>
174                     <td id="p_controls" class="true">true</td>
175                     <th>volume</th>
176                     <td id="p_volume" class="true">1</td>
177                 </tr>
178                 <tr>
179                     <th>muted</th>
180                     <td id="p_muted" class="true">false</td>
181                     <th>defaultMuted</th>
182                     <td id="p_defaultMuted" class="true">false</td>
183                     <th>audioTracks</th>
184                     <td id="p_audioTracks" class="false">undefined</td>
185                 </tr>
186                 <tr>
187                     <th>videoTracks</th>
188                     <td id="p_videoTracks" class="false">undefined</td>
189                     <th>textTracks</th>
190                     <td id="p_textTracks" class="false">undefined</td>
191                     <th>width</th>
192                     <td id="p_width" class="true">0</td>
193                 </tr>
194                 <tr>
195                     <th>height</th>
196                     <td id="p_height" class="true">0</td>
197                     <th>videoWidth</th>
198                     <td id="p_videoWidth" class="true">0</td>
199                     <th>videoHeight</th>
200                     <td id="p_videoHeight" class="true">0</td>
201                 </tr>
202                 <tr>
203                     <th>poster</th>
204                     <td id="p_poster" class="true">none</td>
205                 </tr>
206             </tbody>
207         </table>
208         
209         <table id="canPlayType" border="1" cellpadding="10" cellspacing="10">
210             <caption>canPlayType</caption>
211             <tbody id="m_video">
212                 <tr>
213                     <th>video/ogv</th>
214                     <th>video/mp4</th>
215                     <th>video/webm</th>
216                 </tr>
217                 <tr>
218                     <td id='canplayOgv'></td>
219                     <td id='canplayMp4'></td>
220                     <td id='canplayWebm'></td>
221                 </tr>
222             </tbody>
223         </table>
224         
225         <table id="tracks" border="1" cellpadding="10" cellspacing="10">
226             <caption>Tracks</caption>
227             <tbody>
228                 <tr>
229                     <th>Audio</th>
230                     <th>Video</th>
231                     <th>Text</th>
232                 </tr>
233                 
234                 <tr>
235                     <td class="false" id="m_audiotracks">?</td>
236                     <td class="false" id="m_videotracks">?</td>
237                     <td class="false" id="m_texttracks">?</td>
238                 </tr>
239             </tbody>
240         </table>
241         
242     </body>
243 </html>

html中需要用到的js文件，script.js:

  1 var xmlHttp = null;
  2 
  3 var view_time_values = 0;
  4 var view_time = new Array();
  5 
  6 var media_events = new Array();
  7 
  8 media_events["play"] = 0;
  9 media_events["pause"] = 0;
 10 media_events["loadstart"] = 0;
 11 media_events["suspend"] = 0;
 12 media_events["abort"] = 0;
 13 media_events["error"] = 0;
 14 media_events["progress"] = 0;
 15 media_events["emptied"] = 0;
 16 media_events["stalled"] = 0;
 17 media_events["canplay"] = 0;
 18 media_events["canplaythrough"] = 0;
 19 media_events["playing"] = 0;
 20 media_events["waiting"] = 0;
 21 media_events["seeking"] = 0;
 22 media_events["seeked"] = 0;
 23 media_events["ended"] = 0;
 24 media_events["timeupdate"] = 0;
 25 media_events["loadedmetadata"] = 0;
 26 media_events["loadeddata"] = 0;
 27 media_events["durationchange"] = 0;
 28 media_events["ratechange"] = 0;
 29 media_events["volumechange"] = 0;
 30 
 31 var media_events_valueChange = new Array();
 32 
 33 media_events_valueChange["play"] = 0;
 34 media_events_valueChange["pause"] = 0;
 35 media_events_valueChange["loadstart"] = 0;
 36 media_events_valueChange["error"] = 0;
 37 media_events_valueChange["playing"] = 0;
 38 //media_events_valueChange["waiting"] = 0;
 39 //media_events_valueChange["seeking"] = 0;
 40 //media_events_valueChange["seeked"] = 0;
 41 media_events_valueChange["ended"] = 0;
 42 //media_events_valueChange["durationchange"] = 0;
 43 //media_events_valueChange["ratechange"] = 0;
 44 media_events_valueChange["volumechange"] = 0;
 45 
 46 
 47 var media_properties = [ "error", "src", "currentSrc", 
 48 "crossOrigin", "networkState", "preload", 
 49 "buffered", "readyState", "seeking", 
 50 "currentTime", "duration", "startDate", 
 51 "paused", "defaultPlaybackRate", "playbackRate", 
 52 "played", "seekable", "ended",
 53 "autoplay", "loop", "mediaGroup",
 54 "controller", "controls", "volume",
 55 "muted", "defaultMuted", "audioTracks",
 56 "videoTracks", "textTracks","width",
 57 "height", "videoWidth", "videoHeight",
 58 "poster" ];
 59 
 60 document.addEventListener("DOMContentLoaded", initFun, false);
 61 
 62 function initFun()
 63 {
 64     media = document.getElementById('video_1');
 65     
 66     for (key in media_events)
 67     {
 68         media.addEventListener(key, capture, false);
 69     }
 70     
 71     init_properties();
 72     init_canplayType();
 73     xmlHttpFunction();
 74     setInterval(update_properties, 500);
 75 }
 76 
 77 function xmlHttpFunction()
 78 {
 79     
 80     if(window.XMLHttpRequest)
 81     {
 82         xmlHttp = new XMLHttpRequest();
 83     }
 84     else if(window.ActiveXObject)
 85     {
 86         xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
 87     }
 88 }
 89             
 90 /*send post method to server*/
 91 function post_message(key, str)
 92 {
 93     media_events_valueChange[key] = 0;
 94     xmlHttp.open('POST', '192.168.0.61:8080', true);
 95     xmlHttp.onreadystatechange = state_change;
 96     xmlHttp.setRequestHeader('content_type', 'application/x-www-form-urlencoded');
 97     xmlHttp.send(key + str);
 98 }
 99 function state_change()
100 {
101     if(xmlHttp.readyState == 4)
102     {
103         if(xmlHttp.status == 200)
104         {
105             document.getElementById('msgDiv').innerHTML = xmlHttp.responseText;
106         }
107     }
108 }
109 
110 function sum_up()
111 {
112     var i = 0;
113     var result = 0;
114     
115     var totalPauseTime = 0;
116     
117     var username = document.getElementById('userName').value;
118     document.getElementById('userDiv').innerHTML = 'Hello, ' + username + ':';
119     if (view_time.length == 1)
120     {
121         document.getElementById('msgPlayDiv').innerHTML = 'video playback to: ' + Math.round(media.currentTime);
122         return;
123     }
124     
125     if(view_time.length % 2 == 0)
126     {
127         for (i = 1; i < (view_time.length-1); i += 2)
128         {
129             result = view_time[i+1] - view_time[i];
130             totalPauseTime += result;
131         }
132         var curTime = new Date();
133         result = (curTime.getHours()*3600 + curTime.getMinutes()*60 + curTime.getSeconds()) - view_time[view_time.length - 1];
134         totalPauseTime += result;
135     }
136     else
137     {
138         for (i = 1; i < view_time.length; i += 2)
139         {
140             result = view_time[i+1] - view_time[i];
141             
142             totalPauseTime += result;
143         }    
144     }
145     play_str = 'video playback to: ' + Math.round(media.currentTime, 2) + ' s';
146     pause_str = 'you have paused: ' + Math.round(totalPauseTime) + ' s';
147     
148     document.getElementById('msgPlayDiv').innerHTML = play_str;
149     document.getElementById('msgPauseDiv').innerHTML = pause_str;
150     return;
151 }
152 
153 /*初始化media的properties*/
154 function init_properties()
155 {
156     //根据media_properties中的参数为属性赋值
157     for(key in media_properties) 
158     {
159         var propertyVar = document.getElementById('p_' + media_properties[key]);
160         var r = eval('media.' + media_properties[key]);
161         propertyVar.innerHTML = r;
162 
163         if(typeof(r) != 'undefined')
164         {
165             propertyVar.className = 'true';
166         }
167         else
168         {
169             propertyVar.className = 'false';
170         }
171     } 
172 }
173 
174 
175 
176 /*捕捉到事件，对事件进行处理*/
177 function capture(event)
178 {
179     media_events[event.type] += 1;
180     if (event.type in media_events_valueChange)
181         media_events_valueChange[event.type] = 1;
182     
183     for (key in media_events)
184     {
185         var eventVar = document.getElementById('e_' + key);
186         if(eventVar)
187         {
188             eventVar.innerHTML = media_events[key];
189             
190             if (key in media_events_valueChange)
191             {
192                 if ( media_events_valueChange[key] == 1)
193                 {
194                     if(key == 'pause' || key == 'play')
195                     {
196                         var mydate = new Date();
197                         
198                         view_time[view_time_values] = mydate.getHours()*3600 + mydate.getMinutes()*60 + mydate.getSeconds() + mydate.getMilliseconds() / 1000;
199                         view_time_values += 1;
200                     }
201                     
202                     post_message(key ,' event happend');
203                 }
204             }
205     
206             if(media_events[key] > 0)
207                 eventVar.className = 'true';
208         }
209     }
210 
211     update_properties();
212 }
213 
214 /*更新所有的属性值*/
215 function update_properties()
216 {
217     
218     for (key in media_properties)
219     {
220         var propertyVar = document.getElementById('p_' + media_properties[key]);
221         var val = eval('media.' + media_properties[key]);
222         propertyVar.innerHTML = val;
223     }
224     
225     if (!!media.audioTracks)
226     {
227         var td = document.getElementById('m_audiotracks');
228         td.innerHTML = media.audioTracks.length;
229         td.className = 'true';
230     }
231     if(!!media.videoTracks)
232     {
233         var td = document.getElementById('m_videotracks');
234         td.innerHTML = media.videoTracks.length;
235         td.className = 'true';
236     }
237     if(!!media.textTracks)
238     {
239         var td = document.getElementById('m_texttracks');
240         td.innerHTML = media.textTracks.length;
241         td.className = 'true';
242     }
243 }
244 
245 
246 /*检查支持的视频类型*/
247 function init_canplayType()
248 {
249     var ogvType = document.getElementById('canplayOgv');
250     var mp4Type = document.getElementById('canplayMp4');
251     var webmType = document.getElementById('canplayWebm');
252     
253     if(media.canPlayType('video/ogv') == '')
254         ogvType.innerHTML = 'unsupported';
255     else
256         ogvType.innerHTML = media.canPlayType('video/ogv');
257         
258     if(media.canPlayType('video/mp4') =='')
259         mp4Type.innerHTML = 'unsupported';
260     else
261         mp4Type.innerHTML = media.canPlayType('video/mp4');
262         
263     if(media.canPlayType('video/webm') == '')
264         webmType.innerHTML = 'unsupported';
265     else
266         webmType.innerHTML = media.canPlayType('video/webm');
267 }
268 
269 /*视频快进操作*/
270 function  video_fastForward(timeVal)
271 {
272     media.currentTime += 10;
273     update_properties();
274 }
275 
276 /*视频快退操作*/
277 function  video_rewind(timeVal)
278 {
279     media.currentTime -= timeVal;
280     update_properties();
281 }
282 
283 
284 var posterSrc = ['newtest.jpg', 'movie_ogv.png', 'movie_300.jpg'];
285 var videoSrc = ['newtest.webm', 'newtest.flv', 'newtest.mp4', 'newtest.ogv', 'movie_300.webm'];
286 /*更换视频源*/
287 function switchVideo()
288 {
289     var video = document.getElementById('webm');
290     media.setAttribute ('poster', posterSrc[2]);
291     video.setAttribute ('src', videoSrc[4]);
292     media.load();
293 }

html用到的布局文件，这个布局文件比较简单，style.css：

 1 body
 2 {
 3     background-color: white;
 4     font-family: Geneva, sans-serif;
 5     margin: 10px auto;
 6     border: solid;
 7     border-color: #FFFFFF;
 8 }
 9 
10 
11 header
12 {
13     color: #FFFFFF;
14     text-align: center;
15 }
16 
17 
18 div#userInfoDiv
19 {
20     text-align: right;
21     margin: 10px 10px 10px 10px; 
22 }
23 
24 
25 div#container
26 {
27     text-align: center;
28     margin: 20px auto;
29 }
30 
31 
32 div#buttonsDiv
33 {
34     text-align: center;
35     margin: 10px auto;
36 }
37 
38 form#userInfoForm
39 {
40     padding: 10px ;
41 }
42 
43 input
44 {
45     background-color: #ffe4c4;
46 }
47 
48 
49 table
50 {
51     margin: 20px auto;
52     text-align: left;
53     background-color: #c0c0c0;
54 }
55 
56 caption
57 {
58     background-color: gray;
59 }

posted on 2013-03-25 11:57 二师兄89 阅读(434) 评论(0) 收藏举报