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

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. udp丢包 处理

    转自: 自己在做UDP传输时遇到的问题,接收端没设置缓存,结果总是丢包. 看到这篇文章设置了一下接收缓存就好 *;//设置为32K setsockopt(s,SOL_SOCKET,SO_RCVBUF, ...

  2. iframe跨域问题:Uncaught DOMException: Blocked a frame with origin解决方法

    在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中:但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题: 只保留单个滚动条,那么就要让iframe的高度自适应,而从主页面 ...

  3. rocketmq安装与基本操作

    如果不是因为政治原因,就rocketmq的社区活跃度.版本.特性和文档完善度,我是无论如何也不会使用rocketmq的. rocketmq严格意义上并不支持高可靠性,因为其持久化只支持异步,有另外一个 ...

  4. Java 中的多线程你只要看这一篇就够了

    引 如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现.说这个 ...

  5. jQuery中清空元素.empty()和.html(''),两种方法的对比

    jQuery 中有 .empty() 和 .html() 两种方式,都能够清空所选父元素中的所有子元素.但是这两者清空元素的方式上,有着很大的区别: 1.empty() jQuery对象.empty( ...

  6. topcoder srm 305 div1

    problem1 link 直接按照题意模拟即可. import java.util.*; import java.math.*; import static java.lang.Math.*; pu ...

  7. Spring 学习——Resources接口

    Resources 针对资源文件的统一接口 Resources UrlResource:URL对应的资源,只需要一个url即可构建 ClassPathResource:获取类路径下的资源文件 File ...

  8. git如何修改用户名和邮箱名?

    答: 使用git config --global --edit即可进行修改

  9. How to Use GNOME Shell Extensions

    如果没有安装Tweaks请先安装,命令如下: sudo apt install gnome-tweak-tool 1. Use gnome-shell-extensions package [easi ...

  10. LuoguP5221 Product

    题目地址 题目链接 题解 注,下方\((i,j)\)均指\(gcd(i,j)\),以及证明过程有一定的跳步,请确保自己会莫比乌斯反演的基本套路. 介绍本题的\(O(n)\)和\(O(n\sqrt{n} ...