移动端关于视频跳转的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帧相同帧,确保不会跳帧,以上,基本可以确保视频位置正确的跳转。

发布了29 篇原创文章 · 获赞 35 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/linxner/article/details/101296585