Question

在加载视频时，我很难确定如何加载微调器。我不想做DOM加载器，我想在视频加载时加载页面上的所有内容。到目前为止，当我使用onLoadStart和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>
    );

Answer 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处理程序。

在渲染到屏幕之前对内存中的视频加载进行反应

1 个答案: