
http://jtjsf.com
家是最好的健身房,一个健身运动社交的网站
目前手机端健身类的 APP 已经蛮多了,那么作为 Web 开发者,我就想着写一个网页版的吧,于是乎就有了该站。
网站功能介绍
训练-提供适用于在家里练习的健身训练
社区-可以和其他小伙伴交流分享健身运动新鲜事
个人-记录个人的体重、身高和 BMI(身体质量指数),以及记录你健身的时间和次数
开发使用技术
Node.js 、 Mongodb 、 Express 、 Jade 、 Javascript 、 CSS 、 Photoshop
分享开发过程中遇到的一些问题和解决方法
1 、健身训练因为选择非视频的方式实现,因此需要解决页面在用户长时间无操作的情况下,电脑不自动进入睡眠状态。这个问题卡了我非常长时间,一度想要放弃,后来发现播放视频的时候,电脑不会自动进入睡眠状态,因此在网上寻找了一位 Flash 朋友,帮助写了一段几秒循环播放的 Flash 视频,然后将其缩小到 1 像素,放置到页面的某个不起眼的地方,得以解决。
2 、在手机端也遇到自动睡眠的问题, iOS 有解决方法, Android 目前没有找到解决方法。首先需要用户与页面发生交互的动作,这样才能加载一个可以播放声音的音频,通过间隔性的播放音频让手机不进入睡眠状态。(具体操作描述,播放一段 1 秒无声的音频, 5 秒左右后,再继续重新播放该音频,如此循环就不会自动进入睡眠状态了)
3 、手机端播放声音问题,因为训练中会播放很多声音, 而用户点击训练后,只能播放一段音频,因此需要将多个音频合并到一个音频上,然后记录下不同音频的时间段(该段音频的开始时间和结束时间),通过代码设置音频当前时间为该段音频播放的开始时间,并监听该段音频的结束时间,这样就实现了播放不同音频段的功能,又压缩了音频的大小,再结合如上 2 的方法,就可以得到播放不同声音并阻止自动睡眠的功能了。
目前网站健身训练的功能,还不支持非 HTML5 的浏览器,和 Android 上的浏览器。
最后欢迎大家来使用体验、并多提意见哈。
1 fangch 2015-10-25 12:58:16 +08:00 打开有点慢 |
2 Comdex 2015-10-25 13:08:26 +08:00 赞一个 |
3 haiyang416 2015-10-25 13:10:20 +08:00 训练功能还挺直观的,人物动态是鼠标扣的么,还行。 |
4 54sword OP @haiyang416 是的,原动作都是真人的视频,通过工具导出成需要部分的 gif ,然后再到 PS 里操作,一点一点扣出来的,花了不少时间。 |
5 lemayi 2015-10-25 13:26:41 +08:00 强烈赞!!! 我要用起来。 希望真能减的了肥。 |
7 run2 2015-10-25 14:43:18 +08:00 TypeError: null is not an object (evaluating 'f.pause') palyAndPauseapp.js:28:270108 (匿名函数) app.js:28:273183 rapp.js:28:273647 onclickapp.js:28:273993 safari 版本 9.0 (11601.1.56) for OS X |
8 laiqs2011 2015-10-25 14:51:14 +08:00 必须点个赞! 不审查元素还不知道不是视频啊. |
10 Yamade 2015-10-25 15:06:58 +08:00 不啊.大哥.人物怎做得 |
13 kzing 2015-10-25 16:07:34 +08:00 必须赞一个. thx |
14 SquirrelMAN 2015-10-25 16:21:53 +08:00 很有价值的产品!! |
15 Gem 2015-10-25 16:34:30 +08:00 非常棒!尤其是用 ps 抠出来,这个人工不少,这方面有没有专用工具可以自动来做? |
16 moonshile 2015-10-25 16:34:50 +08:00 必须赞一个啊! |
17 54sword OP @Gem 视频素材提取,是使用 GifGrabber ( http://www.gifgrabber.com) 这个工具来录制的,很好用的 gif 录制工具,人物轮廓绘制这部分是纯人工的。 |
18 alian 2015-10-25 17:09:00 +08:00 好像访问不了 |
19 alian 2015-10-25 17:09:22 +08:00 又可以了 |
22 ssyz1988 2015-10-26 11:24:17 +08:00 源码能否开放啊 楼主 |
23 efurture 2015-10-26 12:06:17 +08:00 android 在 xml 中加个 screenOn="true" 这个参数 |
25 twoconk 2015-10-26 18:26:12 +08:00 必须赞一个:) |
26 yongzhong 2015-10-27 14:15:54 +08:00 不错,已收藏 |