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="http://clips.vorwaerts-gmbh.de/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 css3模拟简单的视频弹幕功能相关推荐

Java 实现视频弹幕功能
2021年了,还有不支持弹幕的视频网站吗,现在各种弹幕玩法层出不穷,抽奖,ppt都上弹幕玩法了,不整个弹幕都说不过去了,今天笔者就抽空做了一个实时视频弹幕交互功能的实现,不得不说这样的形式为看视频看直 ...
直播电商平台开发，video组件实现视频弹幕功能
直播电商平台开发,video组件实现视频弹幕功能发送弹幕 WXML文件代码如下:  <video class=" ...
Python Opencv 之简单的视频裁剪功能的实现
Python Opencv 之简单的视频裁剪功能的实现目录 Python Opencv 之简单的视频裁剪功能的实现一.简单介绍二.实现原理三.注意实现四.效果预览五.实现步骤这里实现 ...
opencv自动裁切_荐Python Opencv 之简单的视频裁剪功能的实现
Python Opencv 之简单的视频裁剪功能的实现目录一.简单介绍 Python是一种跨平台的计算机程序设计语言.是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随 ...
视频弹幕技术 php,HTML5实现视频弹幕功能
1.首先展示一下弹幕视频弹幕原图,事实说话 2.代码展示 1>html代码展示关闭弹幕开启静音 2>css代码展示 *{ padding: 0; margin: 0; } input{ ...
android-实现一个简单的视频弹幕，Android已死
android:id="@+id/edit_text" android:layout_width="0dp" android:layout_height=&qu ...
python3抓取b站弹幕_python3写爬取B站视频弹幕功能
需要准备的环境: 一个B站账号,需要先登录,否则不能查看历史弹幕记录联网的电脑和顺手的浏览器,我用的Chrome Python3环境以及request模块,安装使用命令,换源比较快: pip3 in ...
html5 canvas实现高并发视频弹幕功能
由于项目需要,分享自己开发的高并发弹幕功能以下为源代码,仅80行而已,可以根据canvas 的宽高自动适配: /*!*@作者: 赵玉*@邮箱: sailiy@126.com*@公司: 彩虹世纪文化传 ...
java实现视频弹幕效果,SpringBoot实现视频弹幕功能 DanmuPlayer插件的使用
前几天朋友让帮忙做一个视频弹幕网站,在找弹幕实现上发现了一个不错的开源的插件. 本文介绍一下基本使用. 一.下载插件和官方示例直接从官网下载,可以运行官方的 demo 例子先玩一下. 我这里进行了一 ...

JavaScript css3模拟简单的视频弹幕功能

思路：

代码：

效果：

JavaScript css3模拟简单的视频弹幕功能相关推荐

最新文章

热门文章