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

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