我有一个视频播放器组件,它在公共文件夹中存储了一系列视频。现在我一个一个地循环播放它们,当一个结束时下一个开始,但两者之间有轻微的延迟。如何在下一个视频开始播放之前加载它,以便没有过渡延迟?
import React, { Component } from "react"
class Player extends Component {
constructor(props) {
super(props)
this.state = {
current: 0,
videos: [
"/Videos/video_1.mp4",
"/Videos/video_2.mp4",
"/Videos/video_3.mp4"
]
}
}
onEnd = () => {
if (this.state.current + 1 === this.state.videos.length) {
this.setState({ current: 0 });
} else {
this.setState({ current: this.state.current + 1 });
}
}
render() {
return (
<div>
<video
src={this.state.videos[this.state.current]}
autoPlay
controls
onEnded={this.onEnd}
/>
</div>
)
}
}
export default Player;
答案 0 :(得分:1)
为什么不为每个源设置每个 video
元素,而不是为一个元素切换它。
然后只留下 1 个视频元素可见,其他隐藏。
在视频元素播放完毕后,让下一个元素可见并开始播放。