标签：des style blog http color os io 使用 java
进入公司一个月拉，总于有机会写个视频播放器了，这次的工作内容主要是给视频播放器加上弹幕功能条，可惜是个小前端，主要是提功能接口和json给后台。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>弹幕</title> 5 <meta charset="utf-8"> 6 <script src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js" type="text/javascript"></script> 7 </head> 8 <style> 9 .demo{ 10 width:680px; 11 margin:30px auto; 12 } 13 .player{margin-bottom: -5px;} 14 .TM{ 15 position: relative; 16 background-color: #010101; 17 height: 35px; 18 line-height: 34px; 19 width: 680px; 20 } 21 .TM-wrap { 22 display: inline-block; 23 position: relative; 24 height: 20px; 25 width: 60px; 26 line-height: 20px; 27 vertical-align: middle; 28 background-color: #3d3d3d; 29 border-radius: 6px; 30 cursor: pointer; 31 } 32 33 .TM-wrapinner { 34 background-color: #717171; 35 border: 1px solid #5c5c5c; 36 border-radius: 6px; 37 color: #c4c4c4; 38 font-size: 14px; 39 font-weight: bold; 40 position: absolute; 41 text-align: center; 42 width: 30px; 43 margin-top: -1px; 44 } 45 .TM-send{ 46 background-color: #285783; 47 color:white; 48 padding:2px 25px; 49 border-radius: 2px; 50 cursor: pointer; 51 } 52 .TM-btn{ 53 background-color: #252928; 54 border:1px solid #3d3b3c; 55 border-radius: 2px; 56 color:#a8a7b5; 57 margin:0 0 0 10px; 58 padding: 2px 5px; 59 cursor: pointer; 60 } 61 #msg{ width:356px; } 62 .TM-pop{ 63 position: absolute; 64 left: 10px; 65 top:-130px; 66 width: 240px; 67 height: 125px; 68 background-color: #ebebeb; 69 border: 1px solid #c4c4c4; 70 } 71 .TM-pop-cont { 72 padding: 12px; 73 } 74 .TM-pop-cont > select { 75 border: 1px solid #cfcfcf; 76 width: 150px; 77 } 78 </style> 79 <body> 80 <div class="demo"> 81 82 <!--播放器--> 83 <div class="player"> 84 85 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="680" height="400" id="polyvplayer"> 86 <param name="movie" value="http://player.polyv.net/player_polyv_20140829.swf?vid=e8888b74d1637589cca18f108ebaf4d1_e"> 87 <param name="allowscriptaccess" value="always"> 88 <param name="allowFullScreen" value="true" /> 89 <embed src="http://player.polyv.net/player_polyv_20140829.swf?vid=e8888b74d1637589cca18f108ebaf4d1_e" width="680" height="400" TYPE="application/x-shockwave-flash" allowscriptaccess="always" name="polyvplayer" allowFullScreen="true" /> 90 </embed> 91 </object> 92 93 </div> 94 95 <!--弹幕--> 96 <div class="TM"> 97 <form action="#" method="post"> 98 <span class="TM-btn">弹幕设置</span> 99 <div class="TM-wrap"> 100 <span class="TM-wrapinner">|||</span> 101 </div> 102 <div class="TM-pop"> 103 <div class="TM-pop-cont"> 104 <label for="fontSize">字号 :</label> 105 <select id="fontSize" name="fontSize"> 106 <option value="16">16号</option> 107 <option value="18">18号</option> 108 <option value="24" selected="selected">24号</option> 109 <option value="36">36号</option> 110 <option value="48">48号</option> 111 </select><br/> 112 <label for="fontMode">状态 :</label> 113 <select id="fontMode" name="fontMode"> 114 <option value="top">顶部</option> 115 <option value="bottom">底部</option> 116 <option value="roll" selected="selected">滚动</option> 117 </select><br/> 118 <label for="fontColor">颜色 :</label> 119 <select id="fontColor" name="fontColor"> 120 <option value="0xFF0000">红色</option> 121 <option value="0x0000FF">蓝色</option> 122 <option value="0x00FF00">绿色</option> 123 <option value="0xFFFF00">黄色</option> 124 <option value="0xFFFFFF" selected="selected">白色</option> 125 <option value="0x000000">黑色</option> 126 </select> 127 </div> 128 </div> 129 <input type="text" placeholder="可以在这里输入弹幕哦！" id="msg" name="msg"/> 130 <span class="TM-send"> 131 发 送 132 </span> 133 <span class="TM-smile"> 134 </span> 135 </form> 136 </div> 137 </div> 138 </body> 139 <script> 140 $(function(){ 141 TM.popTM(); 142 TM.getData(); 143 }) 144 145 var TM = {}; 146 /* 147 *popTM()弹幕设置 148 */ 149 TM.popTM = function(){ 150 var designDom = $(".TM-wrap"), 151 btnDom = $(".TM-wrapinner"), 152 popDom = $(".TM-pop"), 153 TMbtnDom = $(".TM-btn"); 154 155 var Btnleft = ""; 156 157 popDom.hide(); 158 TMbtnDom.click(function(){ 159 popDom.toggle(); 160 }); 161 162 163 designDom.click(function(){ 164 Btnleft = btnDom.position().left; 165 166 if(Btnleft==0){ //开启弹幕 167 168 j2s_showBarrage(); 169 170 btnDom.css("left","28px"); 171 $(this).css("background-color","#4a90d1"); 172 } 173 else{ //关闭弹幕 174 175 j2s_hideBarrage(); 176 177 $(this).css("background-color","#3d3d3d"); 178 btnDom.css("left","0px"); 179 } 180 }); 181 } 182 /* 183 *getData() 184 *获取发送弹幕内容 185 */ 186 TM.getData =function(){ 187 var TMdata = {}; //TMdata为弹幕数据 188 /**默认值**/ 189 TMdata.fontSize = $("#fontSize").val(); 190 TMdata.fontMode = $("#fontMode").val(); 191 TMdata.fontColor = $("#fontColor").val(); 192 TMdata.msg = $("#msg").val(); 193 TMdata.state 194 /**选取的值**/ 195 $("#fontSize").change(function(){ 196 TMdata.fontSize = $(this).val(); 197 }); 198 $("#fontMode").change(function(){ 199 TMdata.fontMode = $(this).val(); 200 }); 201 $("#fontColor").change(function(){ 202 TMdata.fontColor = $(this).val(); 203 }); 204 $("#msg").change(function(){ 205 TMdata.msg = $(this).val(); 206 }); 207 208 $(".TM-send").click(function(){ 209 210 var time = getPlayer("polyvplayer").GetCurrentTime();//调用swf播放器函数 211 var hour = Math.floor(time/3600); 212 var minute = Math.floor((time%3600)/60); 213 var second = (time%60)+1; 214 215 var timeformatted = hour+":"+minute+":"+second; 216 $.post("TM.html", 217 { 218 msg:TMdata.msg, 219 time:timeformatted, 220 fontSize:TMdata.fontSize, 221 fontMode:TMdata.fontMode, 222 fontColor:TMdata.fontColor, 223 timestamp:timestamp() 224 }, 225 function(){ 226 j2s_reloadBarrageData(); 227 }) 228 }); 229 } 230 231 /*****************************/ 232 function timestamp(){ 233 var timestamp = Date.parse(new Date()); 234 return timestamp; 235 } 236 237 238 function getPlayer(movieName) { 239 if (navigator.appName.indexOf("Microsoft") != -1) { 240 241 return $("#"+movieName)[0]; 242 } else { 243 return document[movieName]; 244 } 245 } 246 247 function s2j_callOnBarrageUrl() 248 { 249 return "http://playertest.polyv.net/test/nong/mu_json.php"; 250 251 } 252 253 function j2s_showBarrage() 254 { 255 var player = thisMovie("polyvplayer"); 256 if(player != undefined && player.j2s_showBarrage!= undefined) 257 { 258 player.j2s_showBarrage(); 259 } 260 } 261 262 function j2s_hideBarrage() 263 { 264 var player = thisMovie("polyvplayer"); 265 if(player != undefined && player.j2s_hideBarrage!= undefined) 266 { 267 player.j2s_hideBarrage(); 268 } 269 } 270 271 function j2s_reloadBarrageData() 272 { 273 var player = thisMovie("polyvplayer"); 274 if(player != undefined && player.j2s_reloadBarrageData!= undefined) 275 { 276 player.j2s_reloadBarrageData(); 277 } 278 } 279 280 function j2s_addBarrageMessage() 281 { 282 var player = thisMovie("polyvplayer"); 283 if(player != undefined && player.j2s_addBarrageMessage!= undefined) 284 { 285 player.j2s_addBarrageMessage(‘[{"msg":"登登登登dedede!!!!","time":"0:0:16","fontSize":"big","fontColor":"0xffffff","fontMode":"roll"},{"msg":"等等等的呢嗯的呢!!!!","time":"0:0:16","fontSize":"big","fontColor":"0xffffff","fontMode":"roll"},{"msg":"苏打水苏打水!!!!","time":"0:0:16","fontSize":"big","fontColor":"0xffffff","fontMode":"roll"}]‘); 286 } 287 288 } 289 290 function thisMovie(movieName) { 291 if (navigator.appName.indexOf("Microsoft") != -1) { 292 var reObj=window[movieName]; 293 //ie10下面是collection集合 294 try 295 { 296 if(reObj.length>0) 297 { 298 return reObj[0]; 299 } 300 301 }catch(e) 302 { 303 304 } 305 306 307 308 return ; 309 } 310 else { 311 return document[movieName]; 312 } 313 } 314 /*****************************/ 315 316 317 </script> 318 </html>
难点所在：由于弹幕功能条以后有可能放进播放盒里面，而不是简单嵌入到html里面，因此尽量少使用图片，所以按钮是css绘制的；
获取弹幕设置的数据。
标签：des style blog http color os io 使用 java
原文地址：http://www.cnblogs.com/hanbingljw/p/3951601.html
