HTML5의 WebSocket 및 예제 코드에 대한 자세한 설명
在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 = $('#Barrage');
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:'#000',
87 //内容
88 text:'前方高能注意'
89 },{
90 //从何时开始
91 time:100,
92 //经过的时间
93 duration:6192,
94 //舞台偏移的高度
95 top:100,
96 //弹幕文字大小
97 size:14,
98 //弹幕颜色
99 color:'green',
100 //内容
101 text:'我准备追上前面那条',
102 },{
103 //从何时开始
104 time:130,
105 //经过的时间
106 duration:4192,
107 //舞台偏移的高度
108 top:90,
109 //弹幕文字大小
110 size:16,
111 //弹幕颜色
112 color:'red',
113 //内容
114 text:'遮住遮住遮住。。',
115 },{
116 //从何时开始
117 time:1000,
118 //经过的时间
119 duration:6992,
120 //舞台偏移的高度
121 top:67,
122 //弹幕文字大小
123 size:20,
124 //弹幕颜色
125 color:'blue',
126 //内容
127 text:'临水照影Testing....～～',
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 = $('<p style="min-width:400px;font-size:'+this.config.size +'px;color:'+this.config.color+';">'+this.config.text+'</p>');
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,'swing',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: 'absolute',
169 left: stage.width() + 'px', //隐藏在右侧
170 top:that.config.top || 0 , //如果有定义高度就从配置中取，否则就置顶
171 zIndex:10,//展示到前列
172 display: 'block'
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:'relative',
190 overflow:'hidden'
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+'start',function(){
206 go.start();
207 })
208 });
209
210 var currentQueue = 0;
211 setInterval(function(){
212 //从队列中取第n个开始谈
213 diretor.trigger(currentQueue+'start');
214 //如果都弹完了 循环来一遍
215 if (currentQueue === playCount) {
216 currentQueue = 0;
217 }else{
218 currentQueue++;
219 }
220
221 },checkTime);
222 </script>
223
224
225
226 </html>效果展示：
可以把代码copy出来，点击重播、暂停、快进、放大等功能试试效果，后续结合webSocket 的即时弹幕也会有所展示！
下班喽！！！！拜拜~~
【相关推荐】
1. PHP HTML5 websocket怎么初始化，老是失败
위 내용은 HTML5의 WebSocket 및 예제 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
간단한 HTML5 웹 페이지를 만드는 방법
Aug 12, 2025 am 11:51 AM
간단한 HTML5 웹 페이지를 만들려면 먼저 선언 문서 유형을 사용한 다음 포함 된 기본 구조를 구축 한 다음 문자 인코딩, 뷰포트 및 제목을 설정하고 제목, 단락, 링크, 그림 및 목록과 같은 가시 컨텐츠를 추가해야합니다. .html 파일로 저장하고 서버 지원없이보기를 위해 브라우저에서 직접 열립니다. 이것은 완전하고 효과적인 HTML5 페이지의 기초입니다.
HTML5의 Draggable 속성은 무엇입니까?
Aug 12, 2025 am 09:50 AM
THEDRAGGABERTTRIBITINHTML5는 "true", "false", OranempyString (sameas "true")
HTML5로 사용자 정의 확인란을 만드는 방법
Aug 16, 2025 am 07:05 AM
사용자 정의 확인란을 만들려면 먼저 접근성을 보장하기 위해 레이블이있는 HTML 구조를 사용해야합니다. 2. CSS를 통해 기본 확인란을 숨기고 기능을 유지하십시오. 3. 의사 요소와 의사 클래스를 사용하여 선택한 상태를 사용자 정의 .checkmark 요소에 그리십시오. 4. 대화식 피드백을 향상시키기 위해 호버, 초점 및 선택 스타일을 추가하십시오. 5. 키보드 내비게이션 및 스크린 리더를 지원하기 위해 기본 입력을 유지하고 궁극적으로 아름답고 액세스 가능한 사용자 정의 확인란을 달성하십시오.
HTML5에서 자동 초점 속성을 어떻게 사용합니까?
Aug 14, 2025 pm 06:47 PM
theautofocusattriveAutomaticallyfocusesaformelementwhenapageloads.2.itusabooleanattribute, sonovalueisneded -justincludeautofocusinthetag.3.
HTML5에서 내비게이션 링크에 NAV 태그를 사용하는 방법
Aug 15, 2025 am 05:55 AM
thetaginhtml5isusedTodefineasectionofmajornavigationLinks, 제공 섭취 구조 가공성;
HTML5의 정의 목록은 무엇입니까?
Aug 20, 2025 pm 02:01 PM
adefinitionListInhtml5iscreateDusingTheLementToGroupterms ()가 theIredEfinitions (), 허용 multipleTerMstoshAreadOreAtorMtoHaveMultipleDefinitions, Glossaries, Metadata, 및 Contail -swileimprovingAcccoSandAcccoCsothoand
HTML5 페이지에서 비 크리티컬 CSS를 연기하는 방법은 무엇입니까?
Aug 12, 2025 am 12:15 AM
페이지 로딩 성능을 효과적으로 향상 시키려면 중요한 CSS를 먼저 인화하고 비정규 CSS를 비동기 적으로로드해야합니다. 1. 도구를 사용하거나 중요한 CSS를 수동으로 식별하고이를 인라인으로 확인하십시오. 2. rel = "preload"를 사용하여 Onload, JavaScript Dynamic Loading 또는 RequestIdleCallback 비동기로 결합합니다. 3. 미디어 속성을 사용하여 인쇄 또는 주제와 같은 조건부 스타일의로드를 지연시킵니다. 4. 비정규 CSS를 병합하고 압축하여 요청을 줄입니다. Media = "Print"기술을 사용하여 JavaScript가없는 비동기로드를 달성하여 첫 번째 스크린 렌더링 속도를 크게 최적화 할 수 있습니다.
