JavaScript css3实现简单视频弹幕功能
程序员文章站
2022-03-27 08:12:50
本文尝试写了一个demo模拟了最简单的视频弹幕功能。思路：设置一个
和所播放的video的大小一致，把这个div标签蒙在video上面用于放置弹幕。在video的右边放一个<...
本文尝试写了一个demo模拟了最简单的视频弹幕功能。
思路：
设置一个<div>和所播放的video的大小一致，把这个div标签蒙在video上面用于放置弹幕。在video的右边放一个<ul>列表用于显示弹幕列表。
屏幕上面的弹幕，把内容放在<span>标签里面，一般一行字都是从左边飞到右边， 为了简单起见，这个移动就用了css3 的transition 属性。position设置为absolute,
那么就用的transition过度left属性，实现弹幕的移动。当然要注意设置其父元素的样式 overflow:hidden; 这样当字体飞出去的时候，就会隐藏飞出去的部分。
当点击发送的时候，获取input中的内容、当前日期、视频播放的进度video.currenttime，把这个内容作为一个对象存入一个数组中。把放置弹幕的span标签加入到div蒙版里，设置它的left，transition就会从当前left过度到下一个left，所以实现了移动。过渡完之后这个span标签就没用了，用removechild把它中父元素中移除。同时把生成的<li>标签加入到ul中。
代码：
<!--created by cc on 2017/10/11-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<style type="text/css">
.mainbody{
margin: 10px auto;
text-align: center;
font-family: arial;
position:relative;
}
.send{
width:700px;
margin:0px auto;
text-align:left;
}
.my-msg{
width:85%;
height:35px;
}
.my-btn{
background-color: #ccd0d7;
border-radius: 8px;
width: 50px;
height: 35px;
margin-left:30px;
border:1px solid #00a1d6;
}
.my-list{
display:inline-block;
vertical-align: top;
border:1px solid #ccd0d7;
width:200px;
height:450px;
overflow: auto;
}
.my-tm{
position:absolute;
top:0px;
height:366px;
width: 710px;
overflow:hidden;
}
.rtol{
position:absolute;
display: inline-block;
height:28px;
overflow: hidden;
font-size:24px;
color:#fff;
left:720px;
-moz-transition:left 4s linear;
-webkit-transition:left 4s linear;
-o-transition:left 4s linear;
}
ul{
text-align: left;
list-style-type:none;
margin-top:0px;
padding-left: 8px;
}
li span {
text-align: left;
color: #99a2aa;
}
</style>
<body>
<div>
<div class="mainbody">
<div style="display:inline-block">
<video src="/big_buck_bunny.mp4" height="400" controls></video>
<div class="send">
<input type="text" class="my-msg" id="msgcc" placeholder="发送弹幕~">
<input type="button" class="my-btn" id="sendcc" value="发送">
</div>
</div><div class="my-list">
<span style="color: #00a1d6">~弹幕~</span>
<hr style="border-top:2px solid #185598"/>
<ul id="msg">
</ul>
</div>
<div class="my-tm" id="tmbox">
</div>
</div>
</div>
<script>
var tm=document.getelementbyid('tmbox');
var btn=document.getelementbyid('sendcc');
var video=document.getelementsbytagname('video')[0];
var list=document.getelementbyid('msg');
var msg=document.getelementbyid('msgcc');
var infor=[];
window.οnlοad=function()
{
//设置位置
tm.style.left=(document.body.offsetwidth-911)/2+'px';
}
window.οnresize=function(){
tm.style.left=(document.body.offsetwidth-911)/2+'px';
}
//获取当前日期
function getnowformatdate() {
var date = new date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getmonth() + 1;
var strdate = date.getdate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strdate >= 0 && strdate <= 9) {
strdate = "0" + strdate;
}
var currentdate = month + seperator1 + strdate
+ " " + date.gethours() + seperator2 + date.getminutes();
return currentdate;
}
//按下发送键
btn.οnclick=function(){
var value=msg.value;
if(value&&value!='')
{
var iteminfor={};
iteminfor.value=value;
iteminfor.showtime=video.currenttime; //时间
iteminfor.sendtime=getnowformatdate(); //发送时间
//弹幕列表
var li=document.createelement('li');
li.classname='my-li';
li.innerhtml="<span> > "+value+"</span>";
list.appendchild(li);
//当前弹幕
var text=document.createelement('span');
text.classname='rtol';
text.style.top=math.floor( math.random()*12 )*30+'px';
text.innerhtml=value;
tm.appendchild(text);
//左边位置
settimeout(function(){
text.style.left=-value.length*25+'px';
},200);
//之后把不显示的span删除
settimeout(function(){
tm.removechild(text)
//防止已有弹幕和当前发送的显示冲突，在这里加入到数组中
infor.push(iteminfor);
},5000
)
}
}
//显示已有弹幕
setinterval(function(){
if(video.paused==false)
{
infor.foreach(function(item){
var currenttime=video.currenttime;
if(item.showtime<video.currenttime&&item.showtime>=(video.currenttime-0.5))
{
var text=document.createelement('span');
text.classname='rtol';
text.style.top=math.floor( math.random()*12 )*30+'px';
text.innerhtml=item.value;
tm.appendchild(text);
//左边位置
settimeout(function(){
text.style.left=-(item.value.length*25)+'px';
},200);
//之后把不显示的span删除
settimeout(function(){
tm.removechild(text);
},5000
)
}
});
}
},500)
</script>
</body>
</html>
效果：
虽然这样写很简单，但是有个很大的问题就是transition过渡left属性不能暂停，所以自然这个transition动画就只能等它执行完。或者说每个<span>标签的移动都用interval定时器来完成移动。不过这样写就要复杂一些。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。