首页 > 代码库 > 视频播放器
视频播放器
进入公司一个月拉，总于有机会写个视频播放器了，这次的工作内容主要是给视频播放器加上弹幕功能条，可惜是个小前端，主要是提功能接口和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.state194 /**选取的值**/ 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 try295 {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绘制的；
获取弹幕设置的数据。
视频播放器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。