分类目录归档:html

弹幕播放器增加div弹幕模式

经过我不泻的努力,终于把canvas弹幕和div弹幕融合到一个播放器里了,其中还因为把splice写成slice搞得我两周都没想明白为什么明明显示在屏幕上的弹幕会没有parentNode,同时我还给COL加了直接矩阵变换模式,减小对不一直移动对象的位置计算压力(可惜弹幕是一只移动的诶,只有上下弹幕受益了)(这个更新没有推到COL的github,因为还有点问题)
上demo:http://demo.luojia.me/danmuPlayer/20140602/

默认还是canvas弹幕,在边栏的设置里点“普通弹幕”,再点“单独渲染”,就会进入div弹幕状态了,现在经测试在弹幕密集是div弹幕会很卡,性能远不如canvas弹幕
另外我还加上了描边宽度和阴影厚度的拉条,这自定义简直不敢相信(≧∇≦)(PS:两种弹幕的描边效果有些不一样。。。.canvas是往里面描,div是往外面)

弹幕播放器小幅更新

这一次修复了以下问题:
·弹幕发送重复
·弹幕不贴合时间

添加了以下功能:
·视频变速(用来做高级弹幕的时候获取精确时间用的)
·设置里的“默认隐藏边栏选项

优化:
·弹幕移动
·把弹幕位置设定器放到了canvas帧循环里,移动更流畅

经过我超神的优化,这个播放器在我的小红上CPU占用终于从50%几降到了20%几,在大红黑上看不出什么区别,一直都是2%。。。。

小红的截图
小红

大红黑的截图
大红黑

DEMO:http://demo.luojia.me/danmuPlayer/20140510/

我的弹幕播放器更可爱了

经过好长时间的折腾,我的弹幕播放器现在可以飞弹幕了(≧∇≦)撒花。

这次的demo在这里:http://demo.luojia.me/danmuPlayer/20140502/
[视频链自http://kanoha.org/]

这次大概做了以下改动:
搞好了弹幕显示
修好了轨道分配函数
让它支持一个页面上多播放器,互相独立
搞好了弹幕列表

还有以下问题:
颜色面板还没搞好(虽然可以显示)
有些有特殊字符的弹幕从服务器载入会导致弹幕解析挂掉,所以请善待这个demo
发送弹幕会出来两个一样的弹幕(没找到到底哪里调用了两次弹幕生成函数,也可能是时间轴重复触发了)
播放时如果切换到其它标签页过一会儿再回去,就会把期间所有的弹幕都发出来(卧槽这是怎么回事。。)
包含/+的弹幕无法发送,服务器返回参数数量不对,也就是说/+被转义成了其它什么东西。。。结果就被服务端的参数分解函数分成了2个参数(“+”不见了)

我的弹幕播放器不可能这么可爱

明天终于要回到久别的学校了(鬼才想回去),我的弹幕时间轴的问题还没解决,现在它可以发弹幕了,不过还是不显示弹幕的。

另外这次有demo了哦,地址→:http://demo.luojia.me/danmuPlayer/20140424/
因为明天去学校了,所以研究又要拖一段时间,于是先把这个只能发弹幕不能看弹幕的弹幕播放器demo发出来了。(它只是个demo,没有过滤机制,请好好对待它( • ˍ •ू ))

要正常查看此demo你需要:最新的火狐、opera、chrome。(最新的IE10+和safari也可以用但是由于IE和safari不支持webm格式的视频,就没法看这个demo了)

视频区域有一排红字而且鼠标移上去视频会变白,是因为我用canvas做弹幕层,然后调用了我的CanvasObjLibrary,而且打开了Debug模式,所以会出现。

围观群众们有什么关于时间轴的意见吗?

【自制游戏】捡节操

老师让我做一个作品但是我又没那么多时间做的更好,于是出来这样一个产物。

上交版本我已经交上去了,现在把手里的副本又优化了一下。

地址:http://demo.luojia.me/捡节操/

操作说明:
用鼠标点了屏幕以后用上下左右键来控制小人移动,躲开飞过来的圆点并捡起飘下来的节操。按shift可减速

经我测试,chrome可以正常玩这个游戏,火狐玩起来生活不能自理,IE10+可以正常游戏,opera严重依赖电脑性能。。。。

由于本来想做的不是这个东西,所以有很多冗余的代码,和这个游戏完全没关系。。。

佳佳酱更新了全部文章页面【介绍向】


在底下追加的更新:2013/7/8 14:39

[我知道没人愿意看代码,所以这只是一个介绍性的文章]
像这种更新记录当然要先上旧版渣作的图了=w=(博主一向爱爆黑历史)

就像上面这样,原作是完全赶时间乱写出来的,代码均由php拼凑,结果就是服务器压力(本来就没有什么访客吧啊喂。。是你自己没事找事)

然后抛弃旧题,我们直接进正题,新的全部文章页面可以直接点击博客最上面的“全部文章”按钮(请确保你的浏览器比较新再点那个链接,否则会亮瞎你的双缩脲猫眼)。之所以要写这篇文章是因为光这么点代码尼玛我写了3天啊!!3天啊!所以要纪念一下。。
 
 
 
 
嗯哼。。回到正题,开始介绍新作的全部文章页面都有哪些功能
继续阅读佳佳酱更新了全部文章页面【介绍向】

canvas函数图

【初始编辑】2013/4/21 14:55
【更新 2013/5/1 14:36 】
更新日志:加上坐标轴的箭头,加了两个函数(其实这个不算更新吧。。)。
优化了一下绘制方法:修改了清除画布的方法,极大提高效率。
自定义函数的功能还是没有修好。
代码中已经包含了一部分下次更新的功能:差不多是坐标轴的单位线

昨天我翻出来了以前一时兴起做的一个渣渣函数图绘制的代码,然后又一时兴起想把它改好一点,于是就出现了今天的这篇文章。
【我可是冒着期中考试前不复习的风险来做这个的】
【用chrome浏览效果更佳,其他浏览器可能会有卡顿现象】
现在已经做成了这个样子

源地址在这里佳佳实验室的地址在这里,代码在文章最下面,自带注释
继续阅读canvas函数图

图片转data:URI工具

昨晚由于需要用data:uri,于是做了这么个转换工具
可本地使用,因为文件不用上传
疯狂的点击这里看demo
截图[此截图使用datauri,看不见请升级人品]

上面这张图的datauri

datauri优点:
在页面添加图片不用额外上传文件了!
还有什么就不知到了
缺点:
无法缓存,每次加载页面都要载入(其实想缓存它只要用js文件复制给变量就行了,而且可以一个文件存N张图,和图片分割异曲同工啊)
浏览器支持不全面
转出来的字符串体积一般比原文件大= =。。。

demo源码[部分参考其他网站]

给wordpress加上了个代码显示函数

原理:文档加载完成以后运行相关函数修改所有code标签

首先要做一件事,把加载文章的php的一个函数修改一下,阻止其给code标签内自动把\n换行替换成<br>标签(这个问题苦了我好久吖╮(╯3╰)╭),函数名wpautop,此函数位于/wp-includes/formatting.php中,找到这个函数里的

这一行,括号里加上|code,变成这样:

【这要怎么理解呢。。应该就算是不进行修改的标签列表吧】
然后一切就都方便了,给onLoad加上自己的code处理函数。
以下是我的code处理函数:

然后onLoad加上changecodetag()

暂时没做出高亮,而且还有些小小的问题。就先摆在这里了。
另外谁可以告诉我最后总有一个空行是肿么回事捏?
后期可能有改动,文章就不改了,详见源代码。

做了个元素拖动实验

iframe框引用demo:

原始demo地址:http://www.luojia.tk/shiyanshi.php?id=moveelement

代码:

太阳君和月亮酱

上个例子先。。

然后由于某些原因。。在文章后面的这个太阳或者月亮就是例子了。

单独的例子看这里:http://www.luojia.me/shiyanshi.php?id=sunandmoon

————下面是神圣的代码————–