移动端关于视频跳转的currentTime兼容问题

视频交互类的项目难免会遇到视频跳转位置的问题,我这大致分为两类:

一、手动跳转:就是说在用户主动做了某一操作后视频跳转到某一个时间点。

二、自动跳转:当视频到达某一时间节点自动跳转到另一时间节点。

第一类其实只要控制时间节点能对上就基本没问题,也就是

video.currentTime = 1 //单位:秒

但实际上,android却表现怪异,视频总是会跳到你想要的视频时间点的附近1-2s左右;

解决方案为,跳转视频的关键帧间隔,简单解释为,当视频的fps=24,关键帧间隔为72(默认)时,视频会在每 72/24=3s 设置一个关键帧,当你设置video.currentTime=2.5时,android会自动跳到最近的关键帧,也就离2.5s最近的3s处,也就会导致时间点会偏差1-2s。导出视频时可以设置你想要的帧间隔,但同时帧间隔越小则视频体积会越大,合理设置帧间隔或者插入相同帧来延长时间点,使得时间点包含关键帧是比较好的方案,比如说fps=24,想要跳到1秒20帧,那就关键帧间隔设置为48,然后1秒21、22、23、24帧跟20帧一样,视频会跳转到关键帧1秒24,如此画面就会是你想要的。

第二类问题就除了要解决第一个视频时间点问题外,还要监测视频当前的进度,video标签有一个自带的方法timeupdate,但有一个问题,就是这个事件是大概250ms执行一次,但如果fps=24,帧间隔大概1000/24=42ms;你拿到时间点会有几帧的偏差。可以使用定时器来拿到当前时间点

setInterval(() => {
let cur = video.currentTime
}, 40);

然后再在每个时间点的后面插入3-4帧相同帧,确保不会跳帧,以上,基本可以确保视频位置正确的跳转。

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 移动端关于视频跳转的currentTime兼容问题
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏