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
Four completely different experiences in Apple Watch interaction design revealed
Today is still a case of Watch app design. I love...
Implementation of TCPWrappers access control in Centos
1. TCP Wrappers Overview TCP Wrappers "wraps...
How to view nginx configuration file path and resource file path
View the nginx configuration file path Through ng...
There is an extra blank line after the html page uses include to import the php file
The method found on the Internet works The footer ...
Introduction to new features of ECMAscript
Table of contents 1. Default values for functio...
How to configure Nginx virtual host in CentOS 7.3
Experimental environment A minimally installed Ce...
A brief discussion on the difference between Mysql primary key index and non-primary key index
Table of contents What is an index The difference...
Summary of Css methods for clearing floats
Float is often used in web page layout, but the f...
How to authorize remote connections in MySQL in Linux
Note: Other machines (IP) cannot connect to the M...
In-depth explanation of JavaScript this keyword
Table of contents 1. Introduction 2. Understand t...
Define your own ajax function using JavaScript
Since the network requests initiated by native js...
Introduction to the process of building your own FTP and SFTP servers
FTP and SFTP are widely used as file transfer pro...
How does MySQL achieve multi-version concurrency?
Table of contents MySQL multi-version concurrency...
MySQL uses init-connect to increase the implementation of access audit function
The mysql connection must first be initialized th...
How to redirect to other pages in html page within two seconds
Copy code The code is as follows: <!DOCTYPE ht...