视频弹幕制作

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>