如何在显示之前加载视频

如何解决如何在显示之前加载视频

我有一个视频播放器组件，它在公共文件夹中存储了一系列视频。现在我一个一个地循环播放它们，当一个结束时下一个开始，但两者之间有轻微的延迟。如何在下一个视频开始播放之前加载它，以便没有过渡延迟？

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;

解决方法

为什么不为每个源设置每个 video 元素，而不是为一个元素切换它。

然后只留下 1 个视频元素可见，其他隐藏。

在视频元素播放完毕后，让下一个元素可见并开始播放。