HTML5 WebSocket
在WebSocket API中，浏览器和服务器只需要做一个握手动作，然后，浏览器和服务器之间就形成一条快速通道，两者之间就可以直接进行数据传送，这一个功能可以应用到“字幕”，自己做了一个demo，废话不说了，直接贴代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹幕</title>
</head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
#Barrage{
width:800px;
height:400px;
margin:0 auto;
border:1px solid #000;
}
#Video1{
box-shadow: 10px 5px 5px black;
display: block;
}
</style>
<script type="text/javascript"> function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.innerHTML = "||";
} else {
video.pause();
button.innerHTML = ">";
}
} function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
} function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
} function makeBig(){
var video = document.getElementById("Video1");
video.width = 600;
}
</script> <body>
<div id="Barrage">
<video id="Video1" autoplay loop>
<source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
<source src="http://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg">
</video>
<div id="buttonbar" style="margin-left: 50px;margin-top: 20px">
<button id="restart" onclick="restart();">重播</button>
<button id="rew" onclick="skip(-3)"><<</button>
<button id="play" onclick="vidplay()">暂停</button>
<button id="fastFwd" onclick="skip(3)">>></button>
<button onclick="makeBig()">放大</button>
</div>
</div>
</body>
<script type="text/javascript">
var that = this;
//舞台是全局变量
var stage = $('#Barrage');
//弹幕的总时间,这个是值得思考的问题，根据业务而已，这个不应该是一开始写死，因为是动态的弹幕，不过这里是为了测试方便，后面会修改
var totalTime = 9000;
//检测时间间隔
var checkTime = 1000;
//总飞幕数
var playCount = Math.ceil(totalTime / checkTime); var messages=[{
//从何时开始
time:0,
//经过的时间
duration:4292,
//舞台偏移的高度
top:10,
//弹幕文字大小
size:16,
//弹幕颜色
color:'#000',
//内容
text:'前方高能注意'
},{
//从何时开始
time:100,
//经过的时间
duration:6192,
//舞台偏移的高度
top:100,
//弹幕文字大小
size:14,
//弹幕颜色
color:'green',
//内容
text:'我准备追上前面那条',
},{
//从何时开始
time:130,
//经过的时间
duration:4192,
//舞台偏移的高度
top:90,
//弹幕文字大小
size:16,
//弹幕颜色
color:'red',
//内容
text:'遮住遮住遮住。。',
},{
//从何时开始
time:1000,
//经过的时间
duration:6992,
//舞台偏移的高度
top:67,
//弹幕文字大小
size:20,
//弹幕颜色
color:'blue',
//内容
text:'临水照影Testing....～～',
}]; //构造一个单独的弹幕
var BarrageItem = function(config){
//保存配置
this.config = config;
//设置样式，这里的样式指的是一个容器，它指包含了单个弹幕的基础样式配置的div
this.outward = this.mySelf();
//准备弹出去，先隐藏再加入到舞台，后面正式获取配置参数时会把一些样式修改。
this.outward.hide().appendTo(stage);
} //单个弹幕样式,从config中提取配置
BarrageItem.prototype.mySelf = function(){
//把配置中的样式写入
var outward = $('<div style="min-width:400px;font-size:'+this.config.size +'px;color:'+this.config.color+';">'+this.config.text+'</div>');
return outward;
} //定义弹的过程，这是弹幕的核心，而且一些高级扩展也是在这里添加 BarrageItem.prototype.move = function(){
var that = this;
var outward = that.outward;
var myWidth = outward.width();
//用jq自带animate来让它运动
outward.animate({
left: -myWidth
},that.config.duration,'swing',function(){
outward.hide(); //弹完我就藏起来
});
} //开始弹弹弹 BarrageItem.prototype.start = function(){
var that = this;
var outward = that.outward; //这里引用的还是原型中的那个outward
//开始之前先隐藏自己
outward.css({
position: 'absolute',
left: stage.width() + 'px', //隐藏在右侧
top:that.config.top || 0 , //如果有定义高度就从配置中取，否则就置顶
zIndex:10,//展示到前列
display: 'block'
}); //延迟时间由配置的开始时间减去队列中该弹幕所处的位置所需要等的位置，而这里的队列位置是由驱使者diretor分配的，事实上根据我的调试发现这种写法只能近似于模仿顺序，然而如果两个播放时间间隔不大将会同时出发，不过这个对于普通体验影响不大。后期如果有强需求可能需要把整个逻辑改掉
var delayTime = that.config.time - (that.config.queue - 1) * checkTime;
setTimeout(function(){
that.move();
},delayTime); } //设置一个支持事件机制的对象，也就是弹幕们的驱使者，它来驱使弹幕弹弹弹 var diretor = $({});//创建一个空的对象 //对舞台进行样式设置，其实可以直接写到css里面
stage.css({
position:'relative',
overflow:'hidden'
}); //批量读取写好的弹幕配置内容，然而后期是需要动态弹幕，打算采用websocket来分配因此这里也只是为了测试而简写 //that.messages 是配合vue的data来设置的，如果是为了在单个文件中引用，去掉that,把message写在该js里面 $.each(messages,function(k,config){
//确认弹出的时间
var queue = Math.ceil(config.time / checkTime);
config.queue = queue; //新建一个对象给它配置
var go = new BarrageItem(config);
//驱动者监听驱使动作
diretor.on(queue+'start',function(){
go.start();
})
}); var currentQueue = 0;
setInterval(function(){
//从队列中取第n个开始谈
diretor.trigger(currentQueue+'start');
//如果都弹完了 循环来一遍
if (currentQueue === playCount) {
currentQueue = 0;
}else{
currentQueue++;
} },checkTime);
</script> </html>
效果展示：
可以把代码copy出来，点击重播、暂停、快进、放大等功能试试效果，后续结合webSocket 的即时弹幕也会有所展示！
下班喽！！！！拜拜~~
HTML5 WebSocket的更多相关文章
- Demo源码放送：打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！
随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...
- 打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！
随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...
- 使用 HTML5 webSocket API实现即时通讯的功能
project下载地址:http://download.csdn.net/detail/wangshuxuncom/6430191 说明: 本project用于展示怎样使用 HTML5 webSock ...
- HTML5 WebSocket和后端C#通信
1.使用 HTML5 开发离线应用 http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/ 2.利用html 5 websocket ...
- python与html5 websocket开发聊天对话窗
1.下载必须的包 https://github.com/Pithikos/python-websocket-server,解压缩并把文件夹名‘python-websocket-server-maste ...
- 浅谈HTML5 WebSocket的机制
回想上一章 在上一章<为什么我们须要HTML5 WebSocket>中,我简单的介绍了下WebSocket的前世今生.相信大家已对WebSocket有了初步的了解.那么今天我们继续深入学习 ...
- 【HTML5 WebSocket】WebSocket对象特性和方法
<HTML5 WebSocket权威指南>学习笔记&3 WebSocket方法的对象特性 1. WebSocket方法 a. send方法 send方法用于在WebSocket连接 ...
- [转]使用 HTML5 WebSocket 构建实时 Web 应用
HTML5 WebSocket 简介和实战演练 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例 ...
- 让ie6 7 8 9支持原生html5 websocket
让ie6 7 8 9支持原生html5 websocket 从github上的 web-socket-js(socket.io好像也是用这个做的他们的flash替代传输方式)改过来的.不过值得 ...
- 使用 HTML5 WebSocket 构建实时 Web 应用
原文地址:http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/ HTML5 WebSocket 简介和实战演练 本文主要介绍 ...
随机推荐
- mysql的enum和set数据类型
定义一个ENUM或者SET类型,可以约束存入的数值. ENUM中的值必须是定义过数值列中的一个,比如ENUM('a','b','c'),存入的只能是'a'或者'b'或者'c',如果存入'','d'或者 ...
- git 实用技巧
一.git 常用操作 1.1 // 该方法会显示某次提交的所有更改 git log --pretty=oneline 文件名 git show 356f6def9d3fb7f3b9032ff5aa4b ...
- ACM/ICPC 之 三维计算几何+暴力枚举+判重(HDU5839)
CCPC网赛第八题,求立体几何数量,题解见注释 //立体几何-求满足要求的四面体个数 //要求1:至少4条边相等 //要求2:四条边相等时,另两条边一定不相邻(即对边) //题解:以当前边为不相邻的其 ...
- Angular2 依赖注入
1. 使用DI 依赖注入是一个很重要的程序设计模式. Angular 有自己的依赖注入框架,离开了它,我们几乎没法构建 Angular 应用.它使用得非常广泛,以至于几乎每个人都会把它简称为 DI. ...
- How to Fix GNOME License Not Accepted Issue on CentOS 7
This post assume that you have just finished the Gnome GUI installation on CentOS 7 by using “yum gr ...
- Reverse Core 第一部分 代码逆向技术基础
@date: 2016/10/14 <逆向工程核心原理>笔记 记录书中较重要的知识,方便回顾 ps. 因有一些逆向基础,所以我本来就比较熟悉的知识并未详细记录 第一章 关于逆向工程 目标, ...
- 序列化，反序列化和transient关键字
一.序列化和反序列化的概念 序列化:指把java对象转换为字节序列的过程. 反序列化:指把字节序列恢复为java对象的过程. 对象的序列化主要有两种用途: 1) 把对象的字节序列保存到硬盘上,通常存放 ...
- from表单如果未指定action，submit提交时候会执行当前url
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- WPF 如何绘制不规则按钮，并且有效点击范围也是不规则的
最近在做一个东西,如地图,点击地图上的某一区域,这一区域需要填充成其他颜色.区域是不规则的,而且点击该区域的任一点,都能够变色.普通的按钮只是简单的加载一幅图肯定是不行的.查了很多资料,终于把它搞定了 ...
- xml in SQL
几年前,学习html时,顺便把xml也学了哈,知道了xpath和xquery的概念,可都没去落实,下面这篇文章,可以学习学习 http://www.cnblogs.com/huyong/archive ...