一个关于视频弹幕的小问题，在线等。。。

开发路上的一个小学生 2016-09-07 11:29:24

点击发表按钮，视频上出现发表的信息，要求是从右往左移动，现在的代码是
1、文字可以显示在视频上，但是不往右走，5s后自动直接消失掉了；
2、定义的每两行之间的间距（_top=100）无效，各位大神。。。。。。。。。。。

<html>
<head>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery.min.js"></script>
<title>互联网视频弹幕</title>


<style type="text/css">
*{margin:0;padding:0;}
body{background:url("img/2.jpg");}
h1{font-family:"方正启体简体";text-align:center;line-height:100px;}
/*start video*/
.video{width:1024px;height:700px;margin:0 auto;position:relative;}
/*弹幕区*/
.video .dm{width:1024px;height:600px;background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;}
.video .start_dm{position:absolute;bottom:10px;right:100px;}
.dm_show{conor:#fff;font-size:20px;font-family:"华文行楷";}
.video .dm_show{position:absolute;top:50px;right:0;}
/*内容发送*/
.video .send{width:100%;height:50px;}
.video .input_text{width:90%;height:40px;font-size:18px;font-family:"华文行楷";color:#a8a8a8;text-indent:10px;}
.video .btn{width:9%;height:40px;float:right;border:none;font-family:"华文行楷";color:#fff;font-size:18px;border-radius:4px;background:linear-gradlint(#df9d68,#bdac77);outline:none;margin-top:2px;box-shadow:1px 1px 5px #000}
.btn:active{background:linear-gradient(#bdac77,#df9d68);transform:translate(1px,1px);}

/*end video*/
</style>
<script type="text/javascript">
$(function(){
//点击弹幕按钮，弹幕出现
$(".start_dm").click(function(){
$(".dm").toggle("slow");
});
//点击发表按钮
$(".btn").click(function(){
var content = $(".input_text").val();
var _lable = $("<div>"+content+"</div>");
$(".dm_show").append(_lable);
init_screat();
});

function init_screat(){
var _top = 0;
$(".dm_show").find("div").each(function(){//每一个div都执行的方法
var _left = $(".dm").width() - $(this).width();
var _height = $(".dm").height();
_top += 100;
if(_top > _height-100){
_top = 0;
}

//文字位置
$(this).css({left:_left,top:_top});
$(this).animate({left:"-"+_left+"=0px"},5000,function(){
$(this).remove();
});
});
}
});
</script>

</head>

<body>
<h1>互联网视频弹幕</h1>

<div class="video">
<embed src='http://player.youku.com/player.php/Type/Folder/Fid//Ob//sid/XMTcxMjY4Mzc2MA==/v.swf'
quality='high' width='1024' height='700' align='middle' allowScriptAccess='always'
allowFullScreen='true' mode='transparent' type='application/x-shockwave-flash'>
</embed>

<input type="button" value="弹幕" class="start_dm"/>
<div class="dm">
<div class="dm_show"></div>
</div>

<div class="send">
<input type="text" class="input_text" />
<input type="button" class="btn" value="发送" />
</div>
</div>

</body>
</html>

...全文

211 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiqincai7 2016-09-07

打赏
举报

要实现弹幕要解决两个问题。一是，如何实时显示消息。二是，如何实现动画效果。如果这两个问题解决了，那么这个功能也就不难了。关于实时显示消息，你可以自己通过长连接，socket.io来实现；如果你觉得自己写麻烦，也可以使用第三方推送服务来实现，例如goeasy推送等关于实现动态效果，我只用过jQuery animate函数。对了，GoEasy推送官网上有个关于弹幕的demo,希望对你有帮助

本课程主要讲解了1.服务器的消息如何发给客户端；2.通过实现方式利用websocket；3.websocket实现方案概述等内容，希望学完之后对你有所收获。