在渲染到屏幕之前在内存中响应视频加载

IT技术 reactjs asynchronous html5-video loading
2021-05-11 12:03:29

我很难弄清楚如何在加载视频时加载微调器。我不想做 DOM 加载器，我希望在加载视频时加载页面上的所有内容。到目前为止，当我使用onLoadStartand 时onLoadedData，它们似乎在整个页面加载完成的同时触发。没有帮助。

有没有办法异步加载它并在加载时显示微调器？也许加载到虚拟内存中？

这是我当前的代码：

“渲染”功能

    const { isLoading } = this.state;

    return (
        <React.Fragment>
            {isLoading && (
                <CircularProgress />
            )}

            <video
                loop
                muted
                autoPlay
                src={WaveVideo}
                preload={'auto'}
                type={'video/mp4'}
                className={classes.video}
                ref={ref => this.headerVideo}
                onLoadStart={() => {
                    console.log('...I am loading...')
                    this.setState({ isLoading: true });
                }}
                onLoadedData={() => {
                    console.log('Data is loaded!')
                    this.setState({ isLoading: false });
                }}>
            </video>
        </React.Fragment>
    );
1个回答

由于您包含了该autoplay属性，因此使用该onplay事件应该适用于这种情况。我修改了您的原始示例以演示：

componentDidMount() {
  this.setState({isLoading: true})
}

render() {
    const { isLoading } = this.state;

    return (
        <React.Fragment>
            {isLoading && <CircularProgress />}

            <video
                loop
                muted
                autoPlay
                src={WaveVideo}
                preload={'auto'}
                type={'video/mp4'}
                className={classes.video}
                ref={ref => this.headerVideo}
                onLoadEnd={() => this.setState({isLoading: false})}>
            </video>
        </React.Fragment>
    );
}

所以当这个组件被创建时，它会运行componentDidMount生命周期函数来设置初始加载指示器状态，导致微调器与加载视频一起呈现。然后，一旦视频开始自行播放，我们就取消加载指示器状态，这会导致微调器不再呈现。

编辑：

从那以后，我了解到您在示例中绑定的事件onloadeddata“在媒体的第一帧完成加载时被触发”。这巧妙地解释了为什么您会看到两个事件同时触发。您打算使用的事件实际上是onloadend. 我已经将它包含在上面的示例中，替换了原始onplay处理程序。

其它你可能感兴趣的问题
上一篇创建 React App 找不到测试 下一篇在多列的material-ui表上添加水平滚动的方法是什么？