分享一个业余时间开发的网站 - 家庭健身房

2015-10-25 12:30:31 +08:00
 54sword
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 上的浏览器。
最后欢迎大家来使用体验、并多提意见哈。
4163 次点击
所在节点    分享创造
26 条回复
fangch
2015-10-25 12:58:16 +08:00
打开有点慢
Comdex
2015-10-25 13:08:26 +08:00
赞一个
haiyang416
2015-10-25 13:10:20 +08:00
训练功能还挺直观的,人物动态是鼠标扣的么,还行。
54sword
2015-10-25 13:17:27 +08:00
@haiyang416 是的,原动作都是真人的视频,通过工具导出成需要部分的 gif ,然后再到 PS 里操作,一点一点扣出来的,花了不少时间。
lemayi
2015-10-25 13:26:41 +08:00
强烈赞!!!
我要用起来。
希望真能减的了肥。
EdwinGhreiC
2015-10-25 14:10:04 +08:00
Logo 能对 Retina 优化下就好了。
sobigfish
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
laiqs2011
2015-10-25 14:51:14 +08:00
必须点个赞!
不审查元素还不知道不是视频啊.
54sword
2015-10-25 14:58:01 +08:00
@sobigfish 你好,请问是在操作情况下出现的吗?我使用的 safari 版本和你一致,但未出现这个问题。
Yamade
2015-10-25 15:06:58 +08:00
不錯啊.大哥.人物怎麼做得
54sword
2015-10-25 15:20:13 +08:00
@Yamade 人物素材是真人视频,然后扣人物的轮廓一点点用 PS 钢笔钩出来的哈。
Yamade
2015-10-25 15:20:54 +08:00
@54sword 我靠你厲害啊.
kzing
2015-10-25 16:07:34 +08:00
必须赞一个. thx
SquirrelMAN
2015-10-25 16:21:53 +08:00
很有价值的产品!!
Gem
2015-10-25 16:34:30 +08:00
非常棒!尤其是用 ps 抠出来,这个人工不少,这方面有没有专用工具可以自动来做?
moonshile
2015-10-25 16:34:50 +08:00
必须赞一个啊!
54sword
2015-10-25 16:59:20 +08:00
@Gem 视频素材提取,是使用 GifGrabber ( http://www.gifgrabber.com) 这个工具来录制的,很好用的 gif 录制工具,人物轮廓绘制这部分是纯人工的。
alian
2015-10-25 17:09:00 +08:00
好像访问不了
alian
2015-10-25 17:09:22 +08:00
又可以了
ldehai
2015-10-25 17:11:16 +08:00
@54sword 超赞

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/230887

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX