详解HTML5中的WebSocket及实例代码

2020-03-24 16:07:21

字体：大中小

来源：转载

供稿：网友

在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  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 } 34 function restart() { 35 var video = document.getElementById( Video1  36 video.currentTime = 0; 37 } 39 function skip(value) { 40 var video = document.getElementById( Video1  41 video.currentTime += value; 42 }  44 function makeBig(){ 45 var video = document.getElementById( Video1  46 video.width = 600; 47 }  48 /script  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 > 效果展示：
可以把代码copy出来，点击重播、暂停、快进、放大等功能试试效果，后续结合webSocket 的即时弹幕也会有所展示！
下班喽！！！！拜拜~~
【相关推荐】
1. PHP HTML5 websocket怎么初始化，老是失败
2. 带你认识HTML5中的WebSocket
3. 解析HTML5中的标签嵌套规则
以上就是详解HTML5中的WebSocket及实例代码的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。