前端大神请进!如何用 js 控制视频不让其快进

2020-07-19 14:49:12 +08:00
 08110920
目前在弄一个微信公众号的学习网课功能,然后要求是需要禁止快进和回退。

隐藏进度条的方法可能不适应所有手机。

求前端大神 来解决一下 如何用 js 去鉴定视频是否快进或者回退。然后对其进行禁止或者返回视频原点。
2854 次点击
所在节点    问与答
13 条回复
ciaoly
2020-07-19 15:05:52 +08:00
非大神,抛砖引玉。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

h5 的 video 提供了几个事件回调可以监听进度条变动和播放时间变动,也许可以在后台开个计时器做时间比对。
whypool
2020-07-19 15:09:50 +08:00
视频用 canvas 画出来,可以完美控制

控制条的功能覆盖
lizheming
2020-07-19 16:00:31 +08:00
基本上就是记录当前播放的时间,ontimeupdate 的时候根据这个缓存的时间做对比,如果大于多少的时候则认为是快进,重新设置为缓存时间,否则就直接更新为缓存时间。
08110920
2020-07-19 16:03:11 +08:00
@lizheming 可以留个联系方式,来弄弄吗?
nuk
2020-07-19 16:21:02 +08:00
加个透明遮罩层。。点击只能播放 /暂停
ysc3839
2020-07-19 16:32:23 +08:00
要求学习多长时间这种,建议后端直接记录开始学习的时间,然后看当前时间够不够,前端完全不用限制,这么做简单还没有明显漏洞。
ThirdFlame
2020-07-19 16:41:34 +08:00
后台判定 如果该视频的学习时长小于视频文件时长,判定该学习未完成即可。 让快进 做无用功。
如果仅仅是不允许自己调整进度的话,那这个方法无效。
08110920
2020-07-19 17:17:10 +08:00
@nuk 放大全屏后 好像就不能这样了
yuzo555
2020-07-19 17:22:56 +08:00
seeked 事件时判断时间是否超过缓存的最大时间,缓存的最大时间在 timeupdate 事件的时候记录。
08110920
2020-07-19 17:33:18 +08:00
@yuzo555 可以留个联系方式,来弄弄吗? 付费的
BreadKiller
2020-07-19 17:47:25 +08:00
npe
2020-07-20 00:07:02 +08:00
计时器....
raaaaaar
2020-07-20 12:29:29 +08:00
就是你把鬼子引导这里来的?

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

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

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

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

© 2021 V2EX