用jQuery制作视频弹幕

效果图：

左侧视频画面上显示弹幕，右侧评论区显示各用户发表过的评论，自己发表的评论也可显示在弹幕上。

基本布局

HTML：

<div id="myvideo"><!-- 视频区 --><div id="video_area"><!-- 视频窗口 --><div id="video_window"><!-- 视频 --><video id="video" src="media/海草舞.mp4" width="500" preload="metadata"></video><!-- 弹幕区，覆盖在视频窗口上 --><div id="barrage_area" class="barrage_area"></div></div><!-- 进度条 --><div class="myprogress"></div><!-- 播放控件 --><div id="mycontrols" class="mycontrols icon"><!-- 播放按钮 --><div id="play" class="play">播放</div><!-- 停止按钮 --><div id="stop" class="stop">停止</div><!-- 弹幕开关 --><div id="on_off" class="barrage_icon"><div>弹幕</div></div><!-- 时间 --><div class="time_area"><span id="curTime"></span> / <span id="durTime"></span></div><!-- 屏宽 --><div class="range_area"></div><!-- 音量图标 --><div id="horn" class="horn"></div></div></div><!-- 评论区 --><div id="comment_area" class="comment_area"><!-- 用户评论 --><div id="comment" class="comment"><div id="comment_content"></div></div><!-- 发表评论 --><div><div><textarea id="mycomment" class="mycomment" rows="5" onfocus="select()"></textarea></div><div style="text-align: right"><input id="comment_submit" type="button" value="评论"></div></div></div>
</div>

主要CSS：

#myvideo{display: flex;/*实例总体布局方式*/
}
/**** 视频区 ****/
#video_area{width: 500px;color: white;background-color: #000000;font-size: 20px;padding: 40px 40px 20px 40px;/*黑边大小*/flex: none;
}
#video_window{position: relative;
}
/**** 播放控制面板 ****/
.mycontrols{display: flex;justify-content: space-between;margin-top: 10px;
}
/** 弹幕 **/
@keyframes barrageAnimation{/*弹幕移动动画*/0%{right: 0;transform: translate(100%, 0);}100%{right: 100%;transform: translate(0, 0);}
}
.barrage_area{/*弹幕区*/position: absolute;/*叠放在视频窗口上*/top: 0;left: 0;width: 500px;/*初始大小*/height: 250px;overflow: hidden;background-color: RGBA(250,10,10,0.3);/*此颜色在调试时使用，完成后要删掉*/
}
.barrage_area div{/*弹幕文字样式*/position: absolute;right: 100%;/*从右侧进入*/font-size: 20px; /*弹幕文字大小*/color: #fefcc9;white-space: nowrap;text-shadow: 0 0 2px #999;animation: barrageAnimation ease-in 10s;
}
/**** 评论区 ****/
.comment_area{width: 280px;margin-left: 5px;flex: none;display: flex;flex-direction: column;/*内部为垂直布局*/
}
.comment{/*用户评论*/border: #66aaEE solid 1px;font-size: 14px;line-height: 20px;padding: 5px;overflow-y: auto;flex: auto;/*高度可自动扩展*/
}
.comment div{margin-top: 5px;/*评论间距*/
}
.comment span{color: #cd4606;/*用户名颜色*/
}
.mycomment{/*发表评论文本框*/width: 275px;margin-top: 5px;
}
/****弹幕开关图标****/
/*用例：
<div class="barrage_icon"><div>弹幕</div>
</div>
关闭状态需向class中添加off，即：class="barrage_icon off"
*/
.barrage_icon{/*圆角矩形*/position: relative;width: 40px;height: 20px;line-height: 20px;font-size: 12px;border-radius: 10px;background-color: darkcyan;padding: 0 5px;cursor: default;
}
.barrage_icon::after{/*圆形按钮*/content: "";position: absolute;top: 0;right: 0;width: 20px;height: 20px;border-radius: 100%;background-color: #aaaaaa;background: radial-gradient(circle,#c0c0c0,#f1f1f1);
}
.barrage_icon.off{/*关闭状态*/background-color: #999999;text-align: right;
}
.barrage_icon.off::after{right: auto;left: 0;
}

效果图上的各种控件都是用CSS画的，量很大，这里只给出了与弹幕相关的。

弹幕数据

弹幕数据应来自于后台数据库，此处我们用一个JSON文件模拟从数据库中读取到的数据，结构如下：
barrage.json:

{"data":[{"time": 3.5,"username": "自强奋斗者协会","text": "又一神曲"},{"time": 88.6,"username": "请叫我天才369号","text": "现在才知道萧全是唱斗龙战士1主题曲的人"},{"time": 5.1,"username": "葫芦小紫","text": "海草海草海草海草。。。"},{"time": 76.9,"username": "NONGZHENG","text": "抛开成见，还是挺好听的"},{"time": 8,"username": "神兽驴蛋蛋儿","text": "继社会摇之后又一神曲，萧全有毒！！！"},{"time": 20,"username": "fanfan","text": "好听"},{"time": 20,"username": "小米","text": "嗨起来，哈哈哈。。。"}]
}

time是发布时间，是用户在观看视频时发布的，以秒数为单位，比如"time": 3.5表示用户在看到视频播到3.5秒时发布了此条评论。
username是用户名。
text是评论文本。

弹幕控制

几个要点：

弹幕区要覆盖在视频上，大小与视频相同（调试时加了个红色背景，调试完记得要删掉）
播放时用Ajax加载弹幕数据
监听视频的timeupdate事件，保证弹幕出现的时间与视频播放时间同步
弹幕出现的位置和移动的速度是随机的
关闭弹幕不能用隐藏，它会导致再打开时积累的弹幕一起涌出，所以用修改不透明度的方式隐藏弹幕

JS代码：（需使用jQuery）

/**** 弹幕控制 ****/
var barrage = {data: [], //弹幕文本area_id: "#barrage_area", //弹幕区idarea_width: 0, //弹幕区宽度area_height: 0, //弹幕区高度isLoad: false, //是否已加载弹幕数据isOn: true, //是否开启弹幕on_off_id: "#on_off", //弹幕开关idcurTime: 0, //当前时间setBarrageArea: function (width,height) {//设置弹幕区大小this.area_width = width;this.area_height = height;$(this.area_id).css({"width":width+"px","height":height+"px"});//设置弹幕区大小},getData: function () { //获取弹幕文本var that = this;$.ajax({type: "GET",url: "js/barrage.json",//弹幕数据地址data: {},dataType: "json",success: function(res) {that.data = res.data;that.data.sort(function (a, b) {//按时间顺序排序return a.time-b.time;});that.isLoad = true;}});},showBarrage: function () { //显示弹幕if(this.data.length==0) return;if(this.data[0].time>this.curTime) return;var text = this.data[0].text; //取出首条弹幕var top = Math.random()*(this.area_height-20);//随机生成弹幕文本位置var dt = 6;//速度基点if(this.area_width>600){dt += 2;}if(this.area_width>800){dt += 2;}if(this.area_width>1000){//大屏幕增加时间dt += 2;}var dmtime = Math.random()*10+dt;//随机生成弹幕过渡时间if(text.length>10){//长文本增加时间dmtime+=5;}if(text.length>20){dmtime+=4;}if(text.length>30){dmtime+=3;}var div = $("<div></div>").text(text).css({"top":top,"animation-duration":dmtime});$(this.area_id).prepend(div);//显示弹幕this.data.shift(); //从数组中删除已输出的弹幕},on_off: function () { //弹幕开关处理函数$(this.on_off_id).toggleClass("off");//切换开关状态if(this.isOn){$(this.area_id).css("opacity",0);//关闭弹幕}else {$(this.area_id).css("opacity",1);//打开弹幕}this.isOn = !this.isOn;}
};
barrage.setBarrageArea(500,280);//设置弹幕区大小

事件监听：

单击播放按钮时加载弹幕数据
单击停止按钮时清除弹幕数据，以便再次播放时可从头开始
视频正常结束时也要清除弹幕数据
单击弹幕开关时切换弹幕显示状态
根据视频播放进度显示弹幕

JS代码：

//视频标签
var video = document.getElementById("video");/** 单击播放按钮 **/
$("#play").click(function () {video.play();if(!barrage.isLoad){barrage.getData();//加载弹幕数据comment.clear();//清除评论区内容}
});
/** 单击停止按钮 **/
$("#stop").click(function () {video.pause();video.currentTime = 0;barrage.isLoad = false;barrage.curTime = 0;
});
/* 单击弹幕开关按钮 */
$("#on_off").click(function () {barrage.on_off();
});
/** 监听视频的ended事件 **/
document.getElementById("video").onended = function () {barrage.isLoad = false;barrage.curTime = 0;
};
/** 监听视频的timeupdate事件 **/
document.getElementById("video").ontimeupdate = function () {barrage.curTime = this.currentTime; //同步视频时间comment.append(); //添加到评论区barrage.showBarrage(); //显示弹幕
};

评论控制

评论与弹幕是同步的，而且评论带有用户名。
要点：

加载弹幕时要清空评论区，以便再次播放时不会与上次重叠（见上面的单击播放按钮代码）
评论显示与弹幕是同步的（见上面的timeupdate事件）
评论区填满后要产生垂直滚动条，且要保证滚动条在底部，这样可以让评论向上滚动
自己发布的评论在弹幕上显示（已实现），还要写入后台数据库，这样别人才能看到你发表的评论（未实现）

JS代码：

/**** 评论控制 ****/
var comment = {comment_area_id: "#comment_area",//评论区idcomment_id: "#comment", //评论框idcontent_id: "#comment_content", //评论内容区idsub_id: "#mycomment", //评论文本框idsubButton_id: "#comment_submit", //发布按钮idsetCommentArea: function (width,height) {//设置评论区大小$(this.comment_area_id).css({"width":width,"height":height+115+"px"});},append: function () { //显示已有评论（数据在弹幕控制中）if(barrage.data.length==0) return;if(barrage.data[0].time>barrage.curTime) return;var div = $("<div></div>");//生成评论标签var span = $("<span></span>").text(barrage.data[0].username+"：");div.append(span,barrage.data[0].text);$(this.content_id).append(div);//添加到评论内容区$(this.comment_id)[0].scrollTop = $(this.comment_id)[0].scrollHeight;//保持滚动条在最底部},subComment: function () { //发表评论if(!barrage.isLoad) return;var text = $(this.sub_id).val();//评论内容if(text.length==0) return;barrage.data.unshift({ //添加到弹幕数组中time: 0,//如果写入后台，需设置为视频当前时间video.currentTimeusername: "我",text: text});},clear: function () { //清空评论区$(this.content_id).html("");}
};
/*单击评论发布按钮*/
$(comment.subButton_id).click(function () {comment.subComment();
});
//设置评论区初始大小
comment.setCommentArea(280,250);

调试时要注意视频文件路径和json文件路径，弹幕和评论都必须在播放视频时才可用。

用jQuery制作视频弹幕相关推荐

制作视频弹幕：DanmakuFlameMaster
制作视频弹幕:DanmakuFlameMaster 现在在各大视频软件和直播平台上弹幕随处可见,也是必不可少的东西.所有我们就来制作一下简单的视频弹幕吧基本功能:随机生成弹幕,可自定义发送弹幕,弹幕 ...
利用jQuery制作简易弹幕效果
利用jQuery制作简易弹幕效果实现步骤: 1.制作样式 2.逻辑,思路实现步骤: 1.制作样式我们先来看看body中的代码: <body><div class="b ...
如何使用jQuery 制作全屏幕背景的嵌入视频
实际效果查看: http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype htm ...
flv.js仿B站弹幕html,利用jQuery实现仿哔哩哔哩视频弹幕代码
特效描述:利用jQuery实现仿哔哩哔哩视频弹幕代码.利用jQuery实现仿哔哩哔哩视频弹幕代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 24 人正在观看,100条弹幕时 ...
谁能给我讲讲原理——视频弹幕游戏！！
舍友在一个叫BliBli的视频网站上找到这样一个视频弹幕游戏,说实话我当时一看真的惊呆了. 从来没有见过这种能够互动的.充满游戏性的视频,用户WASD可以控制飞机移动躲避字幕,撞到字幕左上角死亡次数还 ...
CSS奇思妙想—使用 mask 实现视频弹幕人物遮罩过滤
使用 mask 实现视频弹幕人物遮罩过滤经常看一些 LOL 比赛直播的小伙伴,肯定都知道,在一些弹幕网站(Bilibili.虎牙)中,当人物与弹幕出现在一起的时候,弹幕会"巧妙" ...
爬取钉钉在B站卑微道歉视频弹幕，做成词云
爬取钉钉在B站卑微道歉视频弹幕,做成词云|钉~ 听这美妙的声音先看用户老爷们给出得评价 B弹幕爬取的方法打开钉钉下跪视频 B站链接然后进入控制台如图查看,打开控制台刷新下页面. 你就会在控制台看 ...
Java 实现视频弹幕功能
2021年了,还有不支持弹幕的视频网站吗,现在各种弹幕玩法层出不穷,抽奖,ppt都上弹幕玩法了,不整个弹幕都说不过去了,今天笔者就抽空做了一个实时视频弹幕交互功能的实现,不得不说这样的形式为看视频看直 ...
英雄联盟《双城之战》视频弹幕爬取并分析输出词云
目前,拳头制作的英雄联盟首部动画作品<双城之战>在腾讯视频独家播出.而事实再次证明,拳头是一家被游戏耽误的动画公司,<双城之战>首映非常成功,豆瓣评分9.2,5星评价占67.5 ...