V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
54sword

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

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