JavaScript css3实现简单视频弹幕功能
更新时间：2021年07月26日 14:31:57 作者：ccessl
这篇文章主要为大家详细介绍了JavaScript css3实现简单视频弹幕功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文尝试写了一个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定时器来完成移动。不过这样写就要复杂一些。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Javascript添加监听与删除监听用法,较为详细的分析了javascript原理与用法,并补充说明了事件监听的兼容性问题,非常具有实用价值,需要的朋友可以参考下2014-12-12
获取表单控件原始值在某些时候还是比较实用的，具体的获取方法如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
JS预算精度问题确实很麻烦，这个能解决一些问题，虽然有bug.2010-05-05
在这个数字化的时代,网页端的音频处理能力已经成为一个非常热门的需求,本文将详细介绍如何利用 getUserMedia 和 MediaRecorder 这两个强大的 API,实现网页端音频的录制、处理和播放等功能,需要的朋友可以参考下2024-07-07
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
由于需要在服务器端处理，使用就研究使用imagemagick来进行。同时准备封装了一个Node.js和Python的方法，主要还是讲一下然后使用imagemagick来对图片进行缩放、合成后进行裁剪吧2013-09-09
这篇文章主要介绍了原生JS实现的简单小钟表功能,涉及javascript结合定时器的数值运算与页面元素属性动态修改相关操作技巧,需要的朋友可以参考下2018-08-08
在JavaScript开发中,数组操作是不可或缺的一部分,数组去重作为数据处理的一个常见需求,旨在从一个可能包含重复元素的数组中移除重复项,只保留唯一值,本文将详细介绍几种常见的数组去重方法,并结合实际应用场景进行探讨,需要的朋友可以参考下2024-12-12
这篇文章主要为大家详细介绍了uploadify插件实现多个图片上传并预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
JavaScript中的console.assert()函数介绍
这篇文章主要介绍了JavaScript中的console.assert()函数介绍,assert()函数是一个调试中经常使用的断言工具函数,需要的朋友可以参考下2014-12-12
javaScript事件学习小结（四）event的公共成员（属性和方法）
这篇文章主要介绍了javaScript事件学习小结（四）event的公共成员（属性和方法）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
最新评论