1.首先展示一下弹幕视频弹幕原图，事实说话
2.代码展示
1>html代码展示
<div class="barrage">
<video id="myvideo" autoplay loop width="100%" height="300px">
<source src="video/1.mp4">
</video>
<div class="screen">
<div class="content">
<!--内容在这里显示-->
</div>
</div>
<!--发送对话框-->
<div class="send">
<input type="text" class="s_text" placeholder="使用回车可以快速发送弹幕"/>
<input type="button" class="s_btn" value="发送" />
<!--关闭弹幕功能-->
<span class="barrage_close">关闭弹幕</span>
<!-- 静音功能 -->
<span id="muted">开启静音</span>
</div>
</div>2>css代码展示
*{
padding: 0;
margin: 0;
}
input{
outline: none;
}
.barrage {
position: relative;
width: 100%;
height:250px;
}
#myvideo{
position: absolute;
/* width: 100%;
height:300px; */
top: -50px;
left: 0;
z-index: -1;
}
.barrage .screen {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
height: 300px;
}
.barrage .screen .content {
position: relative;
width: 100%;
height: 250px;
background: #000;
opacity:0.5;
/* filter: alpha(opacity=100); *//***针对ie8以上或者更早的浏览器****/
background-color: transparent;
z-index: 1;
}
.barrage .screen .content div {
position: absolute;
font-size: 20px;
font-weight: bold;
white-space: nowrap;
line-height: 40px;
z-index: 40;
}
.barrage .send {
position: absolute;
bottom: 0px;
width: 100%;
height: 55px;
line-height: 55px;
z-index: 1;
/*background: #000;*/
background: rgba(0,0,0,0.5);
text-align: center;
/*display: none;*/
}
.barrage:hover .send{
display: block;
}
.barrage .send .s_text {
width: 60%;
height: 35px;
line-height:35px;
font-size: 16px;
font-family: "微软雅黑";
border-radius:20px;
opacity: 0.8;
}
.barrage .send .s_btn {
width: 105px;
height: 35px;
line-height: 35px;
background: #22B14C;
color: #fff;
border-radius: 10px;
opacity: 0.8;
}
.barrage_close,#muted {
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 10px;
text-align: center;
color: #22B14C;
