前端大神们， html5 视频如何逆序播放？ - V2EX

Home Sign Up Sign In

This topic created in 4160 days ago, the information mentioned may be changed or developed.

比如小米的这个页面
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 replies • 2015-01-08 13:22:57 +08:00

1

LemonZest

Jan 8, 2015

你确定这是视频？

2

yizi

Jan 8, 2015

确实是MP4。。

3

chshouyu

Jan 8, 2015

这明明是图片好么 css3的动画做的

4

chshouyu

Jan 8, 2015

我去。。。还真是MP4

5

yizi

Jan 8, 2015

http://img03.mifile.cn/webfile/images/2014/cn/goods/air/overall/video-main.webm?20141209
还有这个

6

qiayue

PRO

Jan 8, 2015

是不是有两个视频或者同一个视频，前几秒是正，后几秒是反

7

xiyan

Jan 8, 2015

这是很多个短MP4格式拼接的吧，根据滚轮跟排序选择播放下一个视频？

8

gangsta

Jan 8, 2015

设置播放速度为-1试试：

video.playbackRate = -1;

http://www.w3school.com.cn/tags/av_prop_playbackrate.asp

9

yautou

Jan 8, 2015

小米的前端真不是盖的，纯就网页宣传来说看了很心动。

10

yizi

Jan 8, 2015

代码里面有这段：b.currentTime -= .1
倒放的时候给人感觉特别卡，不流畅，估计就是设置播放位置来达到倒放的效果。。

11

loading

Jan 8, 2015 via Android

视频压缩算法都是顺序播放进行的，倒放目前运算力当然卡了。

12

realfex

OP

Jan 8, 2015

@gangsta 你没仔细看我的内容，我看的也是那个页面，-1试过不行

13

realfex

OP

Jan 8, 2015

@Yokira 最佳答案，谢谢各位

About · Help · Advertise · Blog · API · FAQ · Solana · 2488 Online Highest 6679 ·

Select Language

创意工作者们的社区

World is powered by solitude

VERSION: 3.9.8.5 · 59ms · UTC 01:24 · PVG 09:24 · LAX 18:24 · JFK 21:24
♥ Do have faith in what you're doing.