如何实现 pornhub 式的鼠标指向图片时显示视频预览?

2017-06-28 22:57:09 +08:00
 malagebidi
最近在逛 pornhub 的时候,突然想把我的视频站也实现这种鼠标悬停预览的效果,类似于 https://codepen.io/anon/pen/VWypew

网址: http://koflegend.com/
其中用于视频预览的 mp4 文件我已经准备用 ffmpeg 分段去切然后合并了,然后 html 中视频地址写成 img 的一个属性,data-preview="http://xxx.com/xxx/xxx.mp4",不知可操作否,然后问题主要是 js 部分,不知道代码改怎么写,请大神指点下。

5380 次点击
所在节点    问与答
14 条回复
hand515
2017-06-28 23:28:01 +08:00
pornhub 是什么东西?
Laynooor
2017-06-28 23:29:56 +08:00
@hand515 成人网站
leots
2017-06-28 23:41:40 +08:00
歪个楼,我感觉哔哩哔哩的鼠标指向图片显示预览视频做得更友好一些。
但也是不知道要怎么做
binux
2017-06-28 23:44:13 +08:00
放一个 video with poster,鼠标放上去就 play
最简单的,你搞个 gif 不就完了
freshmanc
2017-06-28 23:53:30 +08:00
@leots 说的是 (移动鼠标相当于移动时间轴)?
malagebidi
2017-06-29 00:17:40 +08:00
liangguan5
2017-06-29 00:27:19 +08:00
我在 xhamster.comredtube.com,avtaobao 上都见过楼主说的这种悬停预览效果(#^.^#)
malagebidi
2017-06-29 00:30:24 +08:00
@liangguan5 厉害了我的哥,再补充一个 xvideos.com
malagebidi
2017-06-29 00:56:14 +08:00
@binux 页面上图片太多 600+,这样 lazyload 延迟加载可能没法用了
binux
2017-06-29 01:23:15 +08:00
@malagebidi #9 看了下 xvideos.com,就是简单粗暴鼠标放上去播视频
azh7138m
2017-06-29 08:26:53 +08:00
这么多人收藏。。。
ifreego
2017-06-29 09:47:06 +08:00
pornhub 不是学习这个的吧
charexcalibur
2017-06-29 11:37:11 +08:00
怎么聊着聊着就发车了。。。
0nlyy0u
2017-06-29 14:48:15 +08:00
会因为这帖子,墙了 V2EX 么?

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

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

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

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

© 2021 V2EX