JavaScript css3 to implement simple video barrage function

This article attempts to write a demo to simulate the simplest video barrage function.

Ideas:

Set a <div> that is the same size as the video being played, and place this div tag on top of the video to place the bullet comments. Put a <ul> list on the right side of the video to display the bullet comment list.

The bullet comments on the screen put the content in the <span> tag. Generally, a line of text flies from the left to the right. For simplicity, this movement uses the transition attribute of CSS3 . position is set to absolute,
Then use the transition left attribute to realize the movement of the barrage. Of course, pay attention to setting the style of its parent element overflow:hidden; so that when the font flies out, the flying part will be hidden.

When you click Send, get the content in the input, the current date, and the video playback progress video.currentTime, and store this content as an object in an array. Add the span tag for placing the bullet comment to the div mask, set its left, and the transition will transition from the current left to the next left, thus achieving movement. After the transition, the span tag is useless. Use removeChild to remove it from the parent element. At the same time, add the generated <li> tag to ul.

Code:

<!--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="Send barrage~">
            <input type="button" class="my-btn" id="sendcc" value="Send">
        </div>
        </div><div class="my-list">
            <span style="color: #00a1d6">~Bullet screen~</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.onlοad=function()
    {
        //Set the position tm.style.left=(document.body.offsetWidth-911)/2+'px';
    }
    window.onresize = function(){
        tm.style.left=(document.body.offsetWidth-911)/2+'px';
    }
    //Get the current date 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;
    }
 
    //Press the send button btn.onclick=function(){
        var value=msg.value;
        if(value&&value!='')
        {
            var itemInfor={};
            itemInfor.value=value;
            itemInfor.showTime=video.currentTime; //timeitemInfor.sendTime=getNowFormatDate(); //send time//barrage listvar li=document.createElement('li');
            li.className='my-li';
            li.innerHTML="<span> > "+value+"</span>";
            list.appendChild(li);
 
            //Current bullet screen var text=document.createElement('span');
            text.className='rtol';
            text.style.top=Math.floor( Math.random()*12 )*30+'px';
            text.innerHTML=value;
            tm.appendChild(text);
 
            //Left position setTimeout(function(){
                text.style.left=-value.length*25+'px';
            },200);
 
            //Then delete the span that is not displayed setTimeout(function(){
                    tm.removeChild(text)
                     //To prevent the existing bullet comments from conflicting with the currently sent display, add them to the array here infor.push(itemInfor);
                },5000
            )
        }
    }
 
    //Show existing bullet screen 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);
 
                  //Left position setTimeout(function(){
                      text.style.left=-(item.value.length*25)+'px';
                  },200);
 
                  //Then delete the span that is not displayed setTimeout(function(){
                          tm.removeChild(text);
                      },5000
                  )
 
              }
          });
      }
    },500)
</script>
 
 
</body>
</html>

Effect:

Although this is simple to write, there is a big problem that the transition left attribute cannot be paused , so naturally the transition animation can only wait until it is completed. In other words, the movement of each <span> tag is completed using an interval timer. But writing it this way is a bit more complicated.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: