JavaScript css3实现简单视频弹幕功能(JavaScript css3实现简单视频弹幕功能)
类别:编程学习 浏览量:2058
时间:2021-10-07 00:33:29 JavaScript css3实现简单视频弹幕功能
JavaScript css3实现简单视频弹幕功能本文尝试写了一个demo模拟了最简单的视频弹幕功能。
思路:
设置一个<li>和所播放的video的大小一致,把这个li标签蒙在video上面用于放置弹幕。在video的右边放一个<ul>列表用于显示弹幕列表。
屏幕上面的弹幕,把内容放在<span>标签里面,一般一行字都是从左边飞到右边, 为了简单起见,这个移动就用了CSS3 的transition 属性。position设置为absolute,
那么就用的transition过度left属性,实现弹幕的移动。当然要注意设置其父元素的样式 overflow:hidden; 这样当字体飞出去的时候,就会隐藏飞出去的部分。
当点击发送的时候,获取input中的内容、当前日期、视频播放的进度video.currentTime,把这个内容作为一个对象存入一个数组中。把放置弹幕的span标签加入到li蒙版里,设置它的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> <li> <li class="mainBody"> <li style="display:inline-block"> <video src="/big_buck_bunny.mp4" height="400" controls></video> <li class="send"> <input type="text" class="my-msg" id="msgcc" placeholder="发送弹幕~"> <input type="button" class="my-btn" id="sendcc" value="发送"> </li> </li><li class="my-list"> <span style="color: #00a1d6">~弹幕~</span> <hr style="border-top:2px solid #185598"/> <ul id="msg"> </ul> </li> <li class="my-tm" id="tmbox"> </li> </li> </li> <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定时器来完成移动。不过这样写就要复杂一些。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 动态加载js脚本
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)
- js中数组的操作
- js实现页面自动跳转
- js中的内存机制(详解JS内存空间)
- extjs accordion折叠布局
- jsp实现短信验证码(手动实现js短信验证码输入框)
- js三级联动说明(基于JavaScript实现省市联动效果)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- js简单小游戏代码(用JS实现飞机大战小游戏)
- laravel-admin代码执行流程(解决laravel-admin 自己新建页面里 js 需要刷新一次的问题)
- js如何解决iphone异形屏适配(Html5适配iphoneX刘海屏的简单实现)
- JS实现文字向下滚动
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- jscanvas画折线图(js+canvas实现代码雨效果)
- js弹出框代码(js实现自动锁屏功能)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
- 七夕取消了,牛郎织女没做核酸七夕已经取消(牛郎织女没做核酸七夕已经取消)
- 网友抵制 多地取消 夏日祭 为何惹众怒(网友抵制多地取消)
- 兄弟萌,今年的七夕又取消了 思考 思考(今年的七夕又取消了)
- 七夕取消是什么梗(七夕取消是什么梗)
热门推荐
- 云服务器被流量攻击了(云服务器怎么预防被攻击?)
- php不能用mysql(php写入mysql中文乱码的实例解决方法)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- 利用前端做扫雷游戏(js实现经典扫雷游戏)
- 云服务器怎么设置端口映射(云服务器怎么修改远程端口)
- ssis项目部署配置(基于SSIS 事件的向上传递详解)
- microsoftsqlserver官网(Microsoft SQL Server数据库各版本下载地址集合)
- python气温变化数据分析(基于python历史天气采集的分析)
- 阿里云的自带mysql怎么开启(阿里云云服务器mysql密码找回的方法)
- dedecms标签解析(Dedecms网站给图片alt属性自动调用标题的方法)