代码成长史5(视频弹幕设置)
视频弹幕制作
body{background:#ccc; height:2000px;}
*{margin:0; padding:0}
.box{width:900px;
height:auto;
border:5px solid green;
margin:0 auto;
position:relative;
overflow:hidden;}
.box::after{content:''; display:block; clear:both;}
.box video{
/* 视频可以设置宽高，但是只会有一个方向有设置的大小，另一个方向会根据尺寸自动缩放 */
width:900px;
/* height:500px; */
/* video标签默认和其它元素会有一个小小的间隙，用浮动可以解决这个问题，类似于*/
float:left;}
.send-box
{
width:896px;
height:50px;
border:2px solid red;
float:left;/* border-radius:0 0 20px 20px; */}.
txt{
width:790px;
height:50px;
border:none; float:left;
/* border-radius:0 0 0 20px; */
font-size:20px;padding-left:10px;}
.btn{
width:96px;
height:50px;
border:none; float:left;
/* 去掉表单元素点击后的外边框 */
outline:none;
font-size:20px;}
.btn:hover{
background:red; color:yellow;}
.banner01{
width:40px;
height:200px; background:#fde000; font-size:40px;
padding: 120px 50px;
/* 设置固定定位，不管此元素嵌套在哪个里面，它都是以屏幕做为参考点！！！结果就是始终都是在屏幕里，不管有没有滚动条*/
position:fixed;
left:0px; top:100px;}
.banner01 a{/* 设置了绝对定位后，必须要找一个有定位属性的父级做为参考，不管什么定位都行，只要有定位属性 */
font-size:18px; color:red;
position:absolute;
right:0; top:0; }
.banner02{
width:40px;
height:200px;
background:orange;
font-size:40px;
padding: 120px 50px;
position:fixed;
right:0; top:100px;}
p{
position:absolute;
right:-900px;
top:0;
color:red; width:100%;
/* background:yellow; */}
autoPlay是这个标签提供的属性，可以让视频一加载就开始播放，默认是不播放
controls是这个标签提供的属性, 可以给视频加入控件，比如暂停/播放 音量 进度条等等
视频插入：
<div class="box">
<video src="video/c.mp4" autoPlay controls></video>
弹幕设置：
<input type="text" value=" " placeholder="输入弹幕" class="txt"/>
<input type="button" value="发送弹幕" class="bth"/>
</div>
插入广告：
<div class = "banner01">爱吃葡萄
<a href = "href ://www.baidu.com">关闭</a>
</div>
<div class = "banner02">我是胡萝卜</div>
JS部分：
<script src=".js"></script>
<script>
var videoHeigt = $('video').height();
记住先测试一下性能:
$('.bth').click(function(){
var txtVal = $('.txt').val();
(alert('txtVal'))!
$('.box').append('<p>' + txtVal + '</p>');
var fa = Math.floor(Math.random() * 25 + 16);
var c = Math.floor(Math.ranom() * 1000);
var t = Math.floor(Math.ranom() * (videoHeight - 70) + 20);
var time = Math.floor(Math.random() * 6000 + 2000)
if(c < 100 && c > 9){
c = '0' + c;
}else if(c < 10){
c = c + '00';
}
$('p:last').css({
'fontSize': + fs + 'px','color': '#' + c, 'top': + 'px'
})
$('.box p').animate({
'right' : '1000px'},3000,function(){
$(this).remove()
})
})
</script>
