爱意满满的作品展示区。
54sword

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

  •  4
     
  •   54sword ·
    54sword · Oct 25, 2015 · 6016 views
    This topic created in 4033 days ago, the information mentioned may be changed or developed.

    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 上的浏览器。
    最后欢迎大家来使用体验、并多提意见哈。

    26 replies  •  2015-10-27 14:15:54 +08:00
    fangch
    fangch
    Oct 25, 2015
    1
    打开有点慢
    Comdex
    Comdex
    Oct 25, 2015
    2
    赞一个
    haiyang416
    haiyang416
    Oct 25, 2015
    3
    训练功能还挺直观的,人物动态是鼠标扣的么,还行。
    54sword
    54sword
    OP
    Oct 25, 2015❤️1
    4
    @haiyang416 是的,原动作都是真人的视频,通过工具导出成需要部分的 gif ,然后再到 PS 里操作,一点一点扣出来的,花了不少时间。
    lemayi
    lemayi
    Oct 25, 2015
    5
    强烈赞!!!
    我要用起来。
    希望真能减的了肥。
    EdwinGhreiC
    EdwinGhreiC
    Oct 25, 2015
    6
    Logo 能对 Retina 优化下就好了。
    run2
    run2
    Oct 25, 2015
    7
    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
    laiqs2011
    Oct 25, 2015
    8
    必须点个赞!
    不审查元素还不知道不是视频啊.
    54sword
    54sword
    OP
    Oct 25, 2015
    9
    @sobigfish 你好,请问是在操作情况下出现的吗?我使用的 safari 版本和你一致,但未出现这个问题。
    Yamade
    Yamade
    Oct 25, 2015
    10
    不錯啊.大哥.人物怎麼做得
    54sword
    54sword
    OP
    Oct 25, 2015
    11
    @Yamade 人物素材是真人视频,然后扣人物的轮廓一点点用 PS 钢笔钩出来的哈。
    Yamade
    Yamade
    Oct 25, 2015
    12
    @54sword 我靠你厲害啊.
    kzing
    kzing
    Oct 25, 2015
    13
    必须赞一个. thx
    SquirrelMAN
    SquirrelMAN
    Oct 25, 2015
    14
    很有价值的产品!!
    Gem
    Gem
    Oct 25, 2015
    15
    非常棒!尤其是用 ps 抠出来,这个人工不少,这方面有没有专用工具可以自动来做?
    moonshile
    moonshile
    Oct 25, 2015
    16
    必须赞一个啊!
    54sword
    54sword
    OP
    Oct 25, 2015
    17
    @Gem 视频素材提取,是使用 GifGrabber ( http://www.gifgrabber.com) 这个工具来录制的,很好用的 gif 录制工具,人物轮廓绘制这部分是纯人工的。
    alian
    alian
    Oct 25, 2015
    18
    好像访问不了
    alian
    alian
    Oct 25, 2015
    19
    又可以了
    ldehai
    ldehai
    Oct 25, 2015
    20
    @54sword 超赞
    Sfan
    Sfan
    Oct 25, 2015 via iPhone
    21
    @54sword 已经体验,赞👍🏻
    ssyz1988
    ssyz1988
    Oct 26, 2015
    22
    源码能否开放啊 楼主
    efurture
    efurture
    Oct 26, 2015
    23
    android 在 xml 中加个 screenOn="true" 这个参数
    54sword
    54sword
    OP
    Oct 26, 2015
    24
    @efurture 在普通浏览器(例如手机自带浏览)上的页面,好像这个方法不行哦。
    twoconk
    twoconk
    Oct 26, 2015
    25
    必须赞一个:)
    yongzhong
    yongzhong
    Oct 27, 2015
    26
    不错,已收藏👍
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4549 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 53ms · UTC 01:31 · PVG 09:31 · LAX 17:31 · JFK 20:31
    ♥ Do have faith in what you're doing.