最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法:

1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹幕动画,每一条弹幕就是一个对象,但是由于canvas定位到视频框上面,会覆盖掉直播框,这样就会让我的直播框的一些事件失效所以我就用了下面的一种;

2:另外一种就是用DOM操作去完成弹幕效果,每当你接受到后台数据需要你发送一条弹幕时候就去用DOM操作动态创建一个div然后给他一个定时器去完成弹幕动画效果,当然有很多完成动画效果的方法,例如jquery里面的animate,css3动画啦都是方法,我就不一一细说了。

下面直接贴我写弹幕的方法吧:

//随机数
function rand(min, max) {
  return parseInt(Math.random() * (max - min) + 1) + min;
}

//弹幕
function danmu(str){
  var _top = rand(0,18);
  var danmuobj = $('<div style="position: absolute;height:1.2rem; font-size: 1.1rem;z-index: 10;overflow: hidden; white-space: nowrap;">'+str+'</div>')
  danmuobj.css({"left":$(window).width()+"5rem"})
  danmuobj.css({color:getReandomColor()})
  $("#body").append(danmuobj);
  var num = $(window).width();
  setInterval(function(){
    num--;
    if (num<0) {
    num=$(window).width();
    }
    danmuobj.css({left:num,top:_top+"rem"});
  },20)

//随机颜色

  function getReandomColor(){
    return '#'+(function(h){
    return new Array(7-h.length).join("0")+h
    })((Math.random()*0x1000000<<0).toString(16))
  }

}

总体思路就是需要先添加一条弹幕到文档中,完了再让他动起来完成动画效果,就这么简单;

h5做直播的弹幕效果的更多相关文章

  1. Android弹幕功能实现,模仿斗鱼直播的弹幕效果

    转载出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即 ...

  2. videojs做直播、弹幕

    从上一年开始,我们开始接触直播,现在直播成本真的很低,很多CDN供应商都有提供,本文只是大概讲述播放器这个话题. 开始调研 播放格式,我挑了三种.分别是HLS,RTMP,HTTP-FLV. 下面简单说 ...

  3. H5做的商城客户端,效果很不错

    H5做的商城客户端,效果很不错 H5做的商城客户端,效果和android原生客户端没多大区别,现在h5是越来越火了, android的小伙伴们又遇到一个新的挑战了.本项目只能学习一下WebViewAc ...

  4. 【腾讯Bugly干货分享】H5 视频直播那些事

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...

  5. H5 视频直播相关技术

    一.移动视频直播发展 大家首先来看下面这张图: 可以看到,直播从 PC 到一直发展到移动端,越来越多的直播类 App 上线,同时移动直播进入了前所未有的爆发阶段,但是对于大多数移动直播来说,还是要以 ...

  6. android 弹幕效果demo

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...

  7. Android:简单的弹幕效果达到

    首先,效果图.分类似至360检测到的骚扰电话页面: 布局非常easy,上面是一个RelativeLayout,以下一个Button. 功能: (1)弹幕生成后自己主动从右側往左側滚动(Translat ...

  8. H5视频直播扫盲

    H5视频直播扫盲 2016-05-25 • 前端杂项 • 14 条评论 • lvming19901227 视频直播这么火,再不学就out了. 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主 ...

  9. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

随机推荐

  1. P3690 【模板】Link Cut Tree (动态树)

    P3690 [模板]Link Cut Tree (动态树) 认父不认子的lct 注意:不 要 把 $fa[x]$和$nrt(x)$ 混 在 一 起 ! #include<cstdio> v ...

  2. 关于使用spring mvc或者resteasy构建restful服务的差别与比较

    resteasy 是 jboss的一个开源java api for restful service(JSR 311,sun 2008年发布,最新GA版本是2.0, JAX-RS 2.0 (JSR-33 ...

  3. 教你用Visual Studio Code做PHP开发 - 微软官方工具,IDE中的黑马

    转载于:http://bbs.wfun.com/thread-902655-1-1.html,仅供自己备忘 本文为我在智机网的原创  ] 关于Visual Studio Code,可能有的开发者很陌生 ...

  4. 【Python58--正则2】

    一.字符匹配 1.元字符:完整列表:.   ^   $   *   +   ?   { }   [ ]   \   |   ( ) 元字符 描述 .点 匹配除换行符外任意一个字符 x|y 匹配 x 或 ...

  5. 鼠标滑轮事件QWheelEvent

    一般鼠标滑轮事件会发出信号,参数是QWheelEvent,只需要新建槽函数,QWheelEvent作为参数. void myMouseWheelEvent(QWheelEvent* even) {)/ ...

  6. How to Rerun Failed Tests in JUnit?

    该帖转自其他出处 Sometimes due to some temporarily problems such as connection problems, server problems, br ...

  7. Oracle使用——Linux系统下使用命令实现oracle数据库数据导入

    背景 在工作当中,数据库的备份及数据导入是必不可少的操作,在完全无界面的Linux操作系统中,我们应该怎样实现oracle数据库的导入呢 前提 服务器已配置ftp 模拟环境 一台linux应用服务器上 ...

  8. Java基础——javaMail:使用心得

    想要做一个java发送邮件小功能. 使用的maven搭建的项目. <!-- https://mvnrepository.com/artifact/javax.mail/mail -->&l ...

  9. django使用session缓存Redis

    首先安装redis包 pip install django-redis-sessions 然后在settings中设置 SESSION_ENGINE = 'redis_sessions.session ...

  10. ODAC(V9.5.15) 学习笔记(四)TOraDataSet

    名称 类型 说明 SequenceMode TSequenceMode ODAC可以直接利用Oracle中的序列对象为表的主键赋值,从而实现主键自动增长的功能.该属性决定了在什么场合下使用序列: sm ...