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, 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:
|
<<: Summary of methods to clear cache in Linux system
>>: MySQL 8.0.17 installation and configuration method graphic tutorial
Recommend
Common HTML tag writing errors
We better start paying attention, because HTML Po...
How to deploy SpringBoot project using Docker
The development of Docker technology provides a m...
HTML Language Encyclopedia
123WORDPRESS.COM--HTML超文本标记语言速查手册<!-- --> !D...
How to create an Nginx server with Docker
Operating environment: MAC Docker version: Docker...
How to use cookies to remember passwords for 7 days on the vue login page
Problem Description In the login page of the proj...
Teach you a trick to achieve text comparison in Linux
Preface In the process of writing code, we will i...
The simplest MySQL data backup and restore tutorial in history (Part 2) (Part 37)
Data backup and restore part 3, details are as fo...
MYSQL string forced conversion method example
Preface Since the types of the same fields in the...
A simple example of how to implement fuzzy query in Vue
Preface The so-called fuzzy query is to provide q...
Detailed description of HTML table border control
Only show the top border <table frame=above>...
Vue implements the operation code of clicking a button to download a file (backend Java)
In the previous article, I introduced the functio...
Implementation of master-slave replication in docker compose deployment
Table of contents Configuration parsing Service C...
Summary of web designers' experience and skills in learning web design
As the company's influence grows and its prod...
MySQL log settings and viewing methods
MySQL has the following logs: Error log: -log-err...
The difference between absolute path and relative path in web page creation
1. Absolute path First of all, on the local compu...