詳解HTML5中的WebSocket及實例程式碼-H5教程-PHP中文網

首頁

web前端

H5教程

詳解HTML5中的WebSocket及實例程式碼

零下一度

May 26, 2017 pm 03:30 PM

在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">
 21 
 22     function 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     }
 33 
 34     function restart() {
 35         var video = document.getElementById("Video1");
 36         video.currentTime = 0;
 37     }
 38 
 39     function skip(value) {
 40         var video = document.getElementById("Video1");
 41         video.currentTime += value;
 42     }  
 43 
 44     function makeBig(){
 45         var video = document.getElementById("Video1");
 46         video.width = 600;
 47     }    
 48 </script>
 49 
 50 <body>
 51     <p id="Barrage">
 52         <video id="Video1" 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         <p id="buttonbar" style="margin-left: 50px;margin-top: 20px">
 57             <button id="restart" onclick="restart();">重播</button> 
 58             <button id="rew" onclick="skip(-3)"><<</button>
 59             <button id="play" onclick="vidplay()">暂停</button>
 60             <button id="fastFwd" onclick="skip(3)">>></button>
 61             <button onclick="makeBig()">放大</button>
 62         </p>  
 63     </p>
 64 </body>
 65 <script type="text/javascript">
 66             var that = this;
 67             //舞台是全局变量
 68             var stage = $(&#39;#Barrage&#39;);
 69             //弹幕的总时间,这个是值得思考的问题，根据业务而已，这个不应该是一开始写死，因为是动态的弹幕，不过这里是为了测试方便，后面会修改
 70             var totalTime = 9000;
 71             //检测时间间隔
 72             var checkTime = 1000;
 73             //总飞幕数
 74             var playCount = Math.ceil(totalTime / checkTime);
 75 
 76      var  messages=[{
 77                     //从何时开始
 78                     time:0,
 79                     //经过的时间
 80                     duration:4292,
 81                     //舞台偏移的高度
 82                     top:10,
 83                     //弹幕文字大小
 84                     size:16,
 85                     //弹幕颜色
 86                     color:&#39;#000&#39;,
 87                     //内容
 88                     text:&#39;前方高能注意&#39;
 89                 },{
 90                     //从何时开始
 91                     time:100,
 92                     //经过的时间
 93                     duration:6192,
 94                     //舞台偏移的高度
 95                     top:100,
 96                     //弹幕文字大小
 97                     size:14,
 98                     //弹幕颜色
 99                     color:&#39;green&#39;,
100                     //内容
101                     text:&#39;我准备追上前面那条&#39;,
102                 },{
103                     //从何时开始
104                     time:130,
105                     //经过的时间
106                     duration:4192,
107                     //舞台偏移的高度
108                     top:90,
109                     //弹幕文字大小
110                     size:16,
111                     //弹幕颜色
112                     color:&#39;red&#39;,
113                     //内容
114                     text:&#39;遮住遮住遮住。。&#39;,
115                 },{
116                     //从何时开始
117                     time:1000,
118                     //经过的时间
119                     duration:6992,
120                     //舞台偏移的高度
121                     top:67,
122                     //弹幕文字大小
123                     size:20,
124                     //弹幕颜色
125                     color:&#39;blue&#39;,
126                     //内容
127                     text:&#39;临水照影Testing....～～&#39;,
128                 }];
129 
130             //构造一个单独的弹幕
131             var BarrageItem = function(config){
132                 //保存配置
133                 this.config = config;
134                 //设置样式，这里的样式指的是一个容器，它指包含了单个弹幕的基础样式配置的p
135                 this.outward = this.mySelf();
136                 //准备弹出去，先隐藏再加入到舞台，后面正式获取配置参数时会把一些样式修改。
137                 this.outward.hide().appendTo(stage);
138             }
139 
140             //单个弹幕样式,从config中提取配置
141             BarrageItem.prototype.mySelf = function(){
142             //把配置中的样式写入
143                 var outward = $(&#39;<p style="min-width:400px;font-size:&#39;+this.config.size +&#39;px;color:&#39;+this.config.color+&#39;;">&#39;+this.config.text+&#39;</p>&#39;);
144             return outward;
145             }
146 
147             //定义弹的过程，这是弹幕的核心，而且一些高级扩展也是在这里添加
148             
149             BarrageItem.prototype.move = function(){
150                 var that = this;
151                 var outward = that.outward;
152                 var myWidth = outward.width();
153                 //用jq自带animate来让它运动
154                 outward.animate({
155                     left: -myWidth
156                 },that.config.duration,&#39;swing&#39;,function(){
157                     outward.hide(); //弹完我就藏起来
158                 });
159             }
160 
161             //开始弹弹弹
162 
163             BarrageItem.prototype.start = function(){
164                 var that = this;
165             var outward = that.outward; //这里引用的还是原型中的那个outward
166                 //开始之前先隐藏自己
167                 outward.css({
168                     position: &#39;absolute&#39;,
169                     left: stage.width() + &#39;px&#39;, //隐藏在右侧
170                     top:that.config.top || 0 , //如果有定义高度就从配置中取，否则就置顶
171                     zIndex:10,//展示到前列
172                     display: &#39;block&#39;
173                 });
174 
175                 //延迟时间由配置的开始时间减去队列中该弹幕所处的位置所需要等的位置，而这里的队列位置是由驱使者diretor分配的，事实上根据我的调试发现这种写法只能近似于模仿顺序，然而如果两个播放时间间隔不大将会同时出发，不过这个对于普通体验影响不大。后期如果有强需求可能需要把整个逻辑改掉
176                 var delayTime = that.config.time - (that.config.queue - 1) * checkTime;
177                 setTimeout(function(){
178                     that.move();
179                 },delayTime);
180 
181             }
182 
183             //设置一个支持事件机制的对象，也就是弹幕们的驱使者，它来驱使弹幕弹弹弹
184             
185             var diretor = $({});//创建一个空的对象
186 
187             //对舞台进行样式设置，其实可以直接写到css里面
188             stage.css({
189                 position:&#39;relative&#39;,
190                 overflow:&#39;hidden&#39;
191             });
192             
193             //批量读取写好的弹幕配置内容，然而后期是需要动态弹幕，打算采用websocket来分配因此这里也只是为了测试而简写
194             
195             //that.messages 是配合vue的data来设置的，如果是为了在单个文件中引用，去掉that,把message写在该js里面
196 
197             $.each(messages,function(k,config){
198                 //确认弹出的时间
199                 var queue = Math.ceil(config.time / checkTime);
200                 config.queue = queue;
201 
202                 //新建一个对象给它配置
203                 var go = new BarrageItem(config);
204                 //驱动者监听驱使动作
205                 diretor.on(queue+&#39;start&#39;,function(){
206                     go.start();
207                 })
208             });
209 
210             var currentQueue = 0;
211             setInterval(function(){
212                 //从队列中取第n个开始谈
213                 diretor.trigger(currentQueue+&#39;start&#39;);
214                 //如果都弹完了 循环来一遍
215                 if (currentQueue === playCount) {
216                     currentQueue = 0;
217                 }else{
218                     currentQueue++;
219                 }
220 
221             },checkTime);
222 </script>
223 
224 
225 
226 </html>

效果展示：

HTML5 WebSocket0

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

下班喽！！！！拜拜~~

【相关推荐】

1. PHP HTML5 websocket怎么初始化，老是失败

2. 带你认识HTML5中的WebSocket

3. 解析HTML5中的标签嵌套规则

以上是詳解HTML5中的WebSocket及實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力，極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5：HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進：1.語義化標籤提升了代碼清晰度和SEO效果；2.多媒體支持簡化了視頻和音頻嵌入；3.表單增強簡化了驗證；4.離線與本地存儲提高了用戶體驗；5.畫布與圖形功能增強了網頁的可視化效果。

HTML5：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

See all articles