HTML5 WebSocket - Roberter_H5之家 - 中国HTML5教程资源分享第一站

　　在WebSocket API中，浏览器和服务器只需要做一个握手动作，然后，浏览器和服务器之间就形成一条快速通道，两者之间就可以直接进行数据传送，这一个功能可以应用到“字幕”，自己做了一个demo，废话不说了，直接贴代码：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>弹幕</title> 6 </head> 7 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> 8 <style type="text/css"> 9 #Barrage{ 10 width:800px; 11 height:400px; 12 margin:0 auto; 13 border:1px solid #000; 14 } 15 #Video1{ 16 box-shadow: 10px 5px 5px black; 17 display: block; 18 } 19 </style> 20 <script type="text/javascript"> vidplay() { 23 var video = document.getElementById("Video1"); 24 var button = document.getElementById("play"); 25 if (video.paused) { 26 video.play(); 27 button.innerHTML = "||"; 28 } else { 29 video.pause(); 30 button.innerHTML = ">"; 31 } 32 } restart() { 35 var video = document.getElementById("Video1"); 36 video.currentTime = 0; 37 } skip(value) { 40 var video = document.getElementById("Video1"); 41 video.currentTime += value; 42 } makeBig(){ 45 var video = document.getElementById("Video1"); 46 video.width = 600; 47 } 48 </script> 49 50 <body> 51 <div> 52 <video autoplay loop> 53 <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4"> 54 <source src="http://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg"> 55 </video> 56 <div> 57 <button>重播</button> 58 <button><<</button> 59 <button>暂停</button> 60 <button>>></button> 61 <button>放大</button> 62 </div> 63 </div> 64 </body> 65 <script type="text/javascript"> 66 var that = this; stage = $('#Barrage'); totalTime = 9000; checkTime = 1000; playCount = Math.ceil(totalTime / checkTime); messages=[{ time:0, duration:4292, top:10, size:16, color:'#000', text:'前方高能注意' 89 },{ time:100, duration:6192, top:100, size:14, color:'green', text:'我准备追上前面那条', 102 },{ time:130, duration:4192, top:90, size:16, color:'red', text:'遮住遮住遮住。。', 115 },{ time:1000, duration:6992, top:67, size:20, color:'blue', text:'临水照影Testing....～～', 128 }]; BarrageItem = function(config){ .config = config; .outward = this.mySelf(); .outward.hide().appendTo(stage); 138 } BarrageItem.prototype.mySelf = function(){ outward = $('<divcolor: #0000ff">this.config.size +'px;color:'+this.config.color+';">'+this.config.text+'</div>'); 144 return outward; 145 } BarrageItem.prototype.move = function(){ 150 var that = this; 151 var outward = that.outward; 152 var myWidth = outward.width(); outward.animate({ 155 left: -myWidth 156 },that.config.duration,'swing',function(){ }); 159 } BarrageItem.prototype.start = function(){ 164 var that = this; outward.css({ 168 position: 'absolute', top:that.config.top || 0 , zIndex:10,display: 'block' 173 }); delayTime = that.config.time - (that.config.queue - 1) * checkTime; 177 setTimeout(function(){ 178 that.move(); 179 },delayTime); 180 181 } diretor = $({}); stage.css({ 189 position:'relative', 190 overflow:'hidden' 191 }); $.each(messages,function(k,config){ queue = Math.ceil(config.time / checkTime); 200 config.queue = queue; go = new BarrageItem(config); diretor.on(queue+'start',function(){ 206 go.start(); 207 }) 208 }); currentQueue = 0; 211 setInterval(function(){ diretor.trigger(currentQueue+'start'); (currentQueue === playCount) { 216 currentQueue = 0; 217 }else{ 218 currentQueue++; 219 } 220 221 },checkTime); 222 </script> </html>

效果展示：

可以把代码copy出来，点击重播、暂停、快进、放大等功能试试效果，后续结合webSocket 的即时弹幕也会有所展示！

下班喽！！！！拜拜~~