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

Posted 2023-05-08

【中文标题】在渲染到屏幕之前对内存中的视频加载做出反应

【英文标题】：React video loading in memory before rendering to screen

【发布时间】：2019-07-10 22:55:42

【问题描述】：

我很难弄清楚如何在加载视频时加载微调器。我不想做一个 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>
    );

【参考方案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 处理程序。

【讨论】：

太棒了，会尽快尝试

抱歉，我忘记提供 onloadeddata 事件文档的来源：devdocs.io/dom_events/loadeddata