如何解决根据React或JS中的时间对象跳转HTML视频
我有一个要求,我需要播放带有时间跳转的html视频。
场景是这样的:-
我有一个数组,其中包含诸如const obj = [{start: 2.64,end: 5.79},{start: 7.95,end: 8.69}]
这样的时间标记。
要求视频必须从2.64开始播放直到5.79,然后再跳至7.95,然后在8.69处结束,依此类推。
我的解决方案是这样的:-
const timers = this.state.timers;
let video = this.videoRef;
if (video) {
let index = 0;
video.addEventListener("timeupdate",() => {
if (parseInt(video.currentTime) == parseInt(timers[timers.length - 1].end)) {
video.pause()
}
if (timers[index]) {
if (parseInt(video.currentTime) == parseInt(timers[index].end)) {
if (index <= timers.length - 1) {
index++;
if (timers[index]) {
video.currentTime = timers[index].start;
}
}
}
}
this.setState({
tickTime: Math.ceil(video.currentTime)
})
})
video.play().then(res => {
video.currentTime = timers[0].start
})
}
它工作正常,但是当视频当前时间为2.125455,并且时间对象的结束时间为2.95时,parseInt函数使时间3和视频都跳到3,因此8毫秒从不播放,这8毫秒也是对我来说很关键
对此有什么解决办法吗?
我现在卡住了一段时间
解决方法
好吧,我能够解决问题
仍然感谢
如果有人面对它,这就是解决方案
const timers = this.state.timers;
let video = this.videoRef;
if (video) {
let index = 0;
video.addEventListener("timeupdate",() => {
if (video.currentTime >= timers[timers.length - 1].end) {
video.pause()
}
if (timers[index]) {
if ((video.currentTime) >= (timers[index].end)) {
if (index <= timers.length - 1) {
index++;
if (timers[index] && video.currentTime < timers[index].start) {
video.currentTime = timers[index].start;
}
}
}
}
this.setState({
tickTime: Math.ceil(video.currentTime)
})
})
video.play().then(res => {
video.currentTime = timers[0].start
})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。