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

2015-01-08 11:05:01 +08:00
 realfex
比如小米的这个页面
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设置为负数就为逆序播放

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

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

video.playbackRate = -1;

http://www.w3school.com.cn/tags/av_prop_playbackrate.asp
yautou
2015-01-08 12:49:47 +08:00
小米的前端真不是盖的,纯就网页宣传来说看了很心动。
Yokira
2015-01-08 12:51:37 +08:00
代码里面有这段:b.currentTime -= .1
倒放的时候给人感觉特别卡,不流畅,估计就是设置播放位置来达到倒放的效果。。
loading
2015-01-08 13:07:43 +08:00
视频压缩算法都是顺序播放进行的,倒放目前运算力当然卡了。
realfex
2015-01-08 13:22:31 +08:00
@gangsta 你没仔细看我的内容,我看的也是那个页面,-1试过不行
realfex
2015-01-08 13:22:57 +08:00
@Yokira 最佳答案,谢谢各位

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

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

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

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

© 2021 V2EX