Реагировать на загрузку видео в память перед рендерингом на экран - PullRequest
Новая
       7

Реагировать на загрузку видео в память перед рендерингом на экран

0 голосов
/ 17 февраля 2019

Мне трудно понять, как загрузить спиннер во время загрузки видео.Я не хочу делать загрузчик 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 Ответ

0 голосов
/ 26 февраля 2019

Поскольку у вас есть атрибут 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.

...