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

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. java bean属性拷贝工具类比对(性能+功能)

    业务系统中经常需要两个对象进行属性的拷贝,不能否认逐个的对象拷贝是最快速最安全的做法,但是当数据对象的属性字段数量超过程序员的容忍的程度比如通常超过5个属性的时候,代码因此变得臃肿不堪,使用一些方便的 ...

  2. 【题解】Luogu P2073 送花

    原题传送门 这题需要用到Splay 我们用一棵splay维护金钱 考虑c<=1000000 我们珂以把每种价格现在对应的美丽值存在一个a数组中 这样讲有珂能不太清楚qaq,还是对着操作一个一个讲 ...

  3. String,InputStream相互转换

    一. InputStream转换为String 转换的过程是: 使用FileInputStream读取文件流: 使用InputStreamReader读取FileInputStream流: 使用Buf ...

  4. ODAC(V9.5.15) 学习笔记(四)TCustomDADataSet(2)

    2.连接相关 名称 类型 说明 Connection 指向一个数据库连接对象 Disconnected 设置为True将在数据库关闭后继续保持数据集的开启状态. 3. 数据获取 名称 类型 说明 Fe ...

  5. Bootstrap3基础 form-group 输入框之间出现间隔

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. 如何安装整个linux系统中所需要的mp3播放库插件? 可以在安装rpmfusion仓库后直接通过dnf install进行按照就可以了

    在vi的界面中, 前面的数字, 表示一行. 而对于中文而言, 并不一定是"一个文本行"就是一行, 而是以 回车(硬回车)为标志, 来判定一行的. 而dd, yy等也是以" ...

  7. ActiveMQ安装使用

    入门: https://www.cnblogs.com/cyfonly/p/6380860.html http://www.uml.org.cn/zjjs/201802111.asp https:// ...

  8. 深度学习课程笔记(十一)初探 Capsule Network

    深度学习课程笔记(十一)初探 Capsule Network  2018-02-01  15:58:52 一.先列出几个不错的 reference: 1. https://medium.com/ai% ...

  9. poi导出excel 并处理插入网络图片 范例 处理文件下载中文乱码

    package com.inborn.inshop.controller.product; import com.inborn.inshop.common.util.DateUtils;import ...

  10. Shell脚本(三)

    摘自:菜鸟教程 http://www.runoob.com/linux/linux-shell-echo.html Shell命令 1. echo命令 字符串输出 echo "OK! \c& ...