h5做直播的弹幕效果
最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法:
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做直播的弹幕效果的更多相关文章
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
转载出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即 ...
- videojs做直播、弹幕
从上一年开始,我们开始接触直播,现在直播成本真的很低,很多CDN供应商都有提供,本文只是大概讲述播放器这个话题. 开始调研 播放格式,我挑了三种.分别是HLS,RTMP,HTTP-FLV. 下面简单说 ...
- H5做的商城客户端,效果很不错
H5做的商城客户端,效果很不错 H5做的商城客户端,效果和android原生客户端没多大区别,现在h5是越来越火了, android的小伙伴们又遇到一个新的挑战了.本项目只能学习一下WebViewAc ...
- 【腾讯Bugly干货分享】H5 视频直播那些事
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...
- H5 视频直播相关技术
一.移动视频直播发展 大家首先来看下面这张图: 可以看到,直播从 PC 到一直发展到移动端,越来越多的直播类 App 上线,同时移动直播进入了前所未有的爆发阶段,但是对于大多数移动直播来说,还是要以 ...
- android 弹幕效果demo
记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...
- Android:简单的弹幕效果达到
首先,效果图.分类似至360检测到的骚扰电话页面: 布局非常easy,上面是一个RelativeLayout,以下一个Button. 功能: (1)弹幕生成后自己主动从右側往左側滚动(Translat ...
- H5视频直播扫盲
H5视频直播扫盲 2016-05-25 • 前端杂项 • 14 条评论 • lvming19901227 视频直播这么火,再不学就out了. 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主 ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
随机推荐
- P3690 【模板】Link Cut Tree (动态树)
P3690 [模板]Link Cut Tree (动态树) 认父不认子的lct 注意:不 要 把 $fa[x]$和$nrt(x)$ 混 在 一 起 ! #include<cstdio> v ...
- 关于使用spring mvc或者resteasy构建restful服务的差别与比较
resteasy 是 jboss的一个开源java api for restful service(JSR 311,sun 2008年发布,最新GA版本是2.0, JAX-RS 2.0 (JSR-33 ...
- 教你用Visual Studio Code做PHP开发 - 微软官方工具,IDE中的黑马
转载于:http://bbs.wfun.com/thread-902655-1-1.html,仅供自己备忘 本文为我在智机网的原创 ] 关于Visual Studio Code,可能有的开发者很陌生 ...
- 【Python58--正则2】
一.字符匹配 1.元字符:完整列表:. ^ $ * + ? { } [ ] \ | ( ) 元字符 描述 .点 匹配除换行符外任意一个字符 x|y 匹配 x 或 ...
- 鼠标滑轮事件QWheelEvent
一般鼠标滑轮事件会发出信号,参数是QWheelEvent,只需要新建槽函数,QWheelEvent作为参数. void myMouseWheelEvent(QWheelEvent* even) {)/ ...
- How to Rerun Failed Tests in JUnit?
该帖转自其他出处 Sometimes due to some temporarily problems such as connection problems, server problems, br ...
- Oracle使用——Linux系统下使用命令实现oracle数据库数据导入
背景 在工作当中,数据库的备份及数据导入是必不可少的操作,在完全无界面的Linux操作系统中,我们应该怎样实现oracle数据库的导入呢 前提 服务器已配置ftp 模拟环境 一台linux应用服务器上 ...
- Java基础——javaMail:使用心得
想要做一个java发送邮件小功能. 使用的maven搭建的项目. <!-- https://mvnrepository.com/artifact/javax.mail/mail -->&l ...
- django使用session缓存Redis
首先安装redis包 pip install django-redis-sessions 然后在settings中设置 SESSION_ENGINE = 'redis_sessions.session ...
- ODAC(V9.5.15) 学习笔记(四)TOraDataSet
名称 类型 说明 SequenceMode TSequenceMode ODAC可以直接利用Oracle中的序列对象为表的主键赋值,从而实现主键自动增长的功能.该属性决定了在什么场合下使用序列: sm ...