V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
realfex
V2EX  ›  问与答

前端大神们, html5 视频如何逆序播放?

  •  
  •   realfex · 2015-01-08 11:05:01 +08:00 · 5144 次点击
    这是一个创建于 3642 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如小米的这个页面
    http://www.mi.com/air/

    鼠标滚轮往下滚是顺序播放,往上滚就是逆序播放
    不知道他们怎么实现的

    我查到的video有个属性 playbackRate,
    video.playbackRate = 2 就是2倍速率播放
    video.playbackRate = 0.5 就是0.5倍速率播放

    虽然
    http://www.w3school.com.cn/tags/av_prop_playbackrate.asp
    里面有写到 playbackRate设置为负数就为逆序播放

    但我试了半天貌似不行,设置负数无效

    求大神指点。。。
    13 条回复    2015-01-08 13:22:57 +08:00
    sunshower
        1
    sunshower  
       2015-01-08 12:09:21 +08:00
    你确定这是视频?
    Yokira
        2
    Yokira  
       2015-01-08 12:34:35 +08:00
    确实是MP4。。
    chshouyu
        3
    chshouyu  
       2015-01-08 12:34:49 +08:00
    这明明是图片好么 css3的动画做的
    chshouyu
        4
    chshouyu  
       2015-01-08 12:35:52 +08:00
    我去。。。还真是MP4
    qiayue
        6
    qiayue  
       2015-01-08 12:39:33 +08:00
    是不是有两个视频或者同一个视频,前几秒是正,后几秒是反
    xiyan
        7
    xiyan  
       2015-01-08 12:42:19 +08:00
    这是很多个短MP4格式拼接的吧,根据滚轮跟排序选择播放下一个视频?
    gangsta
        8
    gangsta  
       2015-01-08 12:46:50 +08:00
    设置播放速度为-1试试:

    video.playbackRate = -1;

    http://www.w3school.com.cn/tags/av_prop_playbackrate.asp
    yautou
        9
    yautou  
       2015-01-08 12:49:47 +08:00
    小米的前端真不是盖的,纯就网页宣传来说看了很心动。
    Yokira
        10
    Yokira  
       2015-01-08 12:51:37 +08:00
    代码里面有这段:b.currentTime -= .1
    倒放的时候给人感觉特别卡,不流畅,估计就是设置播放位置来达到倒放的效果。。
    loading
        11
    loading  
       2015-01-08 13:07:43 +08:00 via Android
    视频压缩算法都是顺序播放进行的,倒放目前运算力当然卡了。
    realfex
        12
    realfex  
    OP
       2015-01-08 13:22:31 +08:00
    @gangsta 你没仔细看我的内容,我看的也是那个页面,-1试过不行
    realfex
        13
    realfex  
    OP
       2015-01-08 13:22:57 +08:00
    @Yokira 最佳答案,谢谢各位
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   963 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 21:02 · PVG 05:02 · LAX 13:02 · JFK 16:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.