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实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
随机推荐
- 错误 1 error LNK2019: 无法解析的外部符号 __imp__pthread_create,该符号在函数 _main 中被引用 解决方法
晚上花几分钟在windows下测了下pthread的用法,出现错误 1 error LNK2019: 无法解析的外部符号 __imp__pthread_create,该符号在函数 _main 中被引用 ...
- 解决在ubuntu中安装或升级时出现“11:资源暂时不可用”错误
解决在ubuntu中安装或升级时出现“11:资源暂时不可用”错误 解决在ubuntu中安装或升级时出现“11:资源暂时不可用”错误. 下图为具体情况: 出现问题: termial下在执行sudo ap ...
- python简说(十五)MD5加密
def my_md5(s): news = str(s).encode() m = hashlib.md5(news) return m.hexdigest()
- 使SourceInsight支持Python语言的方法
刚用家里的电脑看Python代码,发现py的文件在SI不显示,才意识到还没有安装Python.CLF插件.正好把这个方法在这分享一下,毕竟so easy~ 下载点这里–>Python.CLF h ...
- bzoj 2936 [Poi 1999] 降水 - 并查集
题目传送门 需要root权限的传送门 题目大意 有一个$n\times m$的网格图,每一格都有一个高度.一次降雨过后问最多能积多少水. 考虑算每一高度能储存的水的量. 如果小于等于这个高度的格子和边 ...
- Oracle使用——oracle表锁住,杀掉锁表进程
背景 在操作Oracle时,多人同时操作oracle数据库的同一张表的时候,经常会造成锁表现象,这时需要手动进行解锁. 步骤 以dba身份登录Oracle数据库(否则用户缺少杀掉进程权限,需要给用户分 ...
- uniGUI试用笔记(八)
在业务系统中常常使用回车键(Enter)替代Tab键完成焦点跳转,在uniGUI下,可以不用代码,直接使用TUniForm的NavigateKeys进行设置: 其中Next和Prior决定了焦点向下一 ...
- C# 基于任务的异步模式的创建与使用的简单示例
对于窗体程序,使用基于任务的异步模式需要用到Task类,下面示例下非常简单的用法. 1.创建一个拥有异步方法的类 该类拥有一个异步方法DoSomthingAsync,根据微软建议的命名规则该方法要带A ...
- tp框架中的一些疑点知识-2
tp中有三种常量: 预定义常量, 这个设置后不会随环境的改变而改变的,比如'URL_MODEL' => 1 注意是 model, 不是 url_mode 路径常量, 也不会随环境的改变而改变的, ...
- ZOJ 3609 Modular Inverse(扩展欧几里得)题解
题意:求乘法逆元最小正正数解 思路:a*x≡1(mod m),则称x 是 a 关于 m 的乘法逆元,可以通过解a*x + m*y = 1解得x.那么通过EXGcd得到特解x1,最小正解x1 = x1 ...