JavaScript css3实现简单视频弹幕功能

2024-10-16 15:55:24

本文尝试写了一个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定时器来完成移动。不过这样写就要复杂一些。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS实现的视频弹幕效果示例

本文实例讲述了JS实现的视频弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>斗鱼
javascript实现视频弹幕效果（两个版本）

本文实例为大家分享了javascript实现视频弹幕效果的具体代码,供大家参考,具体内容如下基础版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; height: 600px; background-color:
JavaScript css3实现简单视频弹幕功能

本文尝试写了一个demo模拟了最简单的视频弹幕功能. 思路: 设置一个<div>和所播放的video的大小一致,把这个div标签蒙在video上面用于放置弹幕.在video的右边放一个<ul>列表用于显示弹幕列表. 屏幕上面的弹幕,把内容放在<span>标签里面,一般一行字都是从左边飞到右边, 为了简单起见,这个移动就用了CSS3 的transition 属性.position设置为absolute, 那么就用的transition过度left属性,实现弹幕的移动.当然
IOS 实现简单的弹幕功能

前言简单实现弹幕功能,表跟我谈效率,但也有用队列控制同时弹的数量. 正文代码实现: let DANMAKU_SPEED: CGFloat = 150 // 弹幕每秒移动速度 let DANMAKU_SPACE_TIME: NSTimeInterval = 1 // 弹幕之间的时间间隔 let DANMAKU_MAX_ROW = 3 // 最多同时弹幕行数 let danmakuFont = UIFont.systemFontOfSize(18) // 弹幕字体大小 var rowArray
python3写爬取B站视频弹幕功能

需要准备的环境: 一个B站账号,需要先登录,否则不能查看历史弹幕记录联网的电脑和顺手的浏览器,我用的Chrome Python3环境以及request模块,安装使用命令,换源比较快: pip3 install request -i http://pypi.douban.com/simple 爬取步骤: 登录后打开需要爬取的视频页面,打开开发者工具台,Chrome可以使用F12快捷键,选择network监听请求点击查看历史弹幕,获取请求其中rolldate后面的数字表示该视频对应的弹幕号,返
Android实现视频弹幕功能

本文实例为大家分享了Android视频弹幕的具体代码,供大家参考,具体内容如下效果图: 上图:代码随机生成的弹幕及弹幕输入栏下图:绿色框的弹幕为用户手动添加发送的弹幕 1.准备工作准备一个视频文件,将该视频文件放到res/raw目录下. 需要将视频设置为横屏播放,即往配置文件中添加android:screenOrientation="landscape": <activity android:name=".MainActivity" android:co
基于JS简单实现手持弹幕功能+文字抖动特效代码

前段时间抖音上有个抖动弹幕挺火的,于是决定仿写一个,话不多说,先看效果- 效果展示 GIF图看着有点模糊,但实际效果还是不错的. 第一眼看上去也不知道该咋做,那就先把要实现的功能拆解一下吧. 生成一个铺满全屏的黑色背景,写上文字,然后内容居中实现无缝滚动实现文字抖动特效旋转90度(默认横屏展示) 代码如下 .html <div class="barrage-box"> <div class="text">抖动字幕</div>
JavaScript简单表格编辑功能实现方法

本文实例讲述了JavaScript简单表格编辑功能实现方法.分享给大家供大家参考.具体如下: <html> <head> <script type="text/javascript"> function getInnerHTML() { alert(document.getElementById("tr2").innerHTML); } function insCell() { var x=document.getElementB
javascript实现非常简单的小数取整功能示例

本文实例讲述了javascript实现非常简单的小数取整功能.分享给大家供大家参考,具体如下: JS核心代码: function truncateNumber(n){ return n|0; } 用法示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS小数取整</title> </head&
原生JavaScript实现的简单省市县三级联动功能示例

本文实例讲述了原生JavaScript实现的简单省市县三级联动功能.分享给大家供大家参考,具体如下: 三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动菜单<
JavaScript实现的简单Tab点击切换功能示例

本文实例讲述了JavaScript实现的简单Tab点击切换功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net tab点击切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #example{ width: 500px; height: 400px; mar

JavaScript css3实现简单视频弹幕功能

思路：

代码：

相关推荐

随机推荐