Lazy Loat YouTube видео Iframe

API API API API -интерсекции Часто используется для ленивых изображений нагрузки, но знаете ли вы, что их можно использовать для отложения любых типов элементов?

На этой неделе я разработал новую целевую страницу для DeckDeckgo Наш веб -редактор с открытым исходным кодом для презентаций, в которых я продемонстрирую видео. Вот почему, по причине производительности, мне пришлось отложить их загрузку, и почему я также делюсь этим новым сообщением в блоге.

Саундтрек

В этой статье мы собираемся лениться загрузить музыкальный клип из моих друзей из родного города Maxi Puch Rodeo Club . Я мог бы очень посоветовать вам сыграть следующее видео, чтобы транслировать отличную музыку, читая этот пост в блоге 😉

Начиная

Я реализовал этот эксперимент с Реагировать Но концепция может быть использована с или без каких -либо фреймворков. Прежде чем мы фактически откладываем загрузку видео, давайте добавим его в компонент (я собрал встроенный код

import React, {} from 'react';

const Video = () => {
    return (
        

            
                Maxi Puch Rodeo Club
            

            
                
                
            
        
    );
};

export default Video;

Теперь мы можем открыть наш браузер и проверить, что он эффективно загружается одновременно с нашей страницей. Вы заметите, что URL -адрес YouTube загружен, даже если видео не отображается.

Запутать видео

Мы создаем новое состояние для отображения или нет наше видео. По умолчанию, поскольку мы не хотим загружать его при загрузке нашей страницы, мы устанавливаем ее на ЛОЖЬ .

const [showVideo, setShowVideo] = useState(false);

Чтобы отложить загрузку видео, мы собираемся использовать API API Observer Intersection. Он будет обнаружен, если элемент будет (или будет) видим в точке зрения (если мы не указаем другой корень для наблюдения). Как только будет обнаружена такая видимость, она запустит событие, чтобы позволить нам выполнить задачу, соответственно, чтобы позволить нам эффективно загрузить видео.

Вот почему мы также охватываем наш элемент в контейнер, потому что нам нужен элемент для наблюдения во время жизненного цикла страницы, независимо от состояния нашего видео. Кроме того, мы также создаем ссылку на него, чтобы создать наше наблюдатель позже.

import React, {createRef, useState} from 'react';

const Video = () => {

    const [showVideo, setShowVideo] = useState(false);

    const container = createRef();

    return (
        

            
                Maxi Puch Rodeo Club
            

            
                {
                  showVideo ? 
                  : undefined
                }
            
        
    );
};

export default Video;

Мы можем проверить наше приложение в браузере, как мы делали ранее, и должны заметить, что видео теперь не загружается и не отображается.

Ленивая загрузка

Наконец, мы можем создать наш наблюдатель. rootmargin используется для добавления ограничивающей коробки вокруг элемента для вычисления пересечений и порог Указывает, какой процент видимости цели должен быть выполнен обратный вызов наблюдателя.

const videoObserver = new IntersectionObserver(onVideoIntersection, {
    rootMargin: '100px 0px',
    threshold: 0.25
});

Чтобы поручить ему наблюдать наш контейнер, мы добавляем Использоватьэффект крюк, который будет выполнен в соответствии с контейнером. Более того, мы также проверяем, поддерживает ли браузер API (который поддерживается “😅).

useEffect(() => {
    if (window && 'IntersectionObserver' in window) {
        if (container && container.current) {
            videoObserver.observe(container.current);
        }
    } else {
        setShowVideo(true);
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [container]);

Наконец, мы объявляем функцию, которая будет вызвана, когда контейнер достигнет видового порта. Мы используем его для изменения нашего состояния, чтобы отобразить видео и Отключить Наш наблюдатель, как нам больше не нужно.

function onVideoIntersection(entries) {
    if (!entries || entries.length <= 0) {
        return;
    }

    if (entries[0].isIntersecting) {
        setShowVideo(true);
        videoObserver.disconnect();
    }
}

Вуаля, вот и все Мы могли бы снова выполнить наш тест уведомление о том, что видео загружается только при необходимости соответственно, когда появляется контейнер 😃

Идти дальше

Ленивая нагрузка – это здорово, но вы можете также добавить индивидуальное управление к Играть и пауза Ваше видео. Для этого мы можем либо кодировать это сами, с YouTube Player API Справочник для IFRAME Alceds , или используйте одну из многих существующих библиотек, но DeckDeckgo – это открытый исходный код, и мы разделили нашу платформу на нескольких автономных компонентах, поэтому угадайте, что? Мы делимся Веб -компонент Чтобы легко встроить видео на YouTube в ваши приложения 😊

Давайте установим его.

npm install @deckdeckgo/youtube --save

И загрузите его в нашем приложении.

import { applyPolyfills, defineCustomElements }
         from '@deckdeckgo/youtube/dist/loader';

applyPolyfills().then(() => {
    defineCustomElements(window);
});

Затем мы удаляем наше состояние для отображения или нет видео, потому что веб -компонент ничего не загружает до дальнейшего уведомления. Заменяем его новой функцией под названием LoadVideo в котором мы выполняем метод компонента LazyLoadContent который заботится обо всем.

async function loadVideo() {
    if (container && container.current) {
        container.current.lazyLoadContent();
    }
}

Наконец, мы добавляем две кнопки, используемые для вызова Играть и пауза И мы заменяем наши iframe с компонентом Анкет

import React, {createRef, useEffect} from 'react';

import { applyPolyfills, defineCustomElements } 
         from '@deckdeckgo/youtube/dist/loader';

applyPolyfills().then(() => {
    defineCustomElements(window);
});

const Video = () => {

    const container = createRef();

    const videoObserver = new
        IntersectionObserver(onVideoIntersection, {
          rootMargin: '100px 0px',
          threshold: 0.25
        });

    useEffect(() => {
        if (window && 'IntersectionObserver' in window) {
            if (container && container.current) {
                videoObserver.observe(container.current);
            }
        } else {
            loadVideo();
        }

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [container]);

    function onVideoIntersection(entries) {
        if (!entries || entries.length <= 0) {
            return;
        }

        if (entries[0].isIntersecting) {
            loadVideo();
            videoObserver.disconnect();
        }
    }

    async function loadVideo() {
        if (container && container.current) {
            container.current.lazyLoadContent();
        }
    }

    return (
        

            
                Maxi Puch Rodeo Club
            

            
            

            
            
        
    );
};

export default Video;

Мы продолжаем наш последний тест, обращаем внимание на то, что видео загружено, мы играем с кнопками, и мы наслаждаемся потрясающей музыкой Maxi Puch Rodeo Club 🪕 🥁🎵👍

Внести свой вклад в наш проект

Даже если это выполняет работу, наш компонент может быть улучшен. Я особенно думаю, что более плавный переход для отображения видео будет полезным. Вот почему я открыл хороший первый выпуск в нашем репо на GitHub Анкет Если вы готовы отдать руку, ваша помощь будет оценена 🙏.

Вишня на торте 🍒🎂

Наш компонент @deckdeckgo/youtube это веб -компонент, разработанный с Трафарет и, следовательно, он может быть использован в любых современных веб -приложениях, с какими -либо фреймворками или без него. Более того, если, как и я, вы, как правило, немного “Bundlephobic”, это добавит к вашему применению, после того, как мини -министерство и Gzipped, только 198 байтов Анкет

К бесконечности и за пределами 🚀

Дэйвид

Обложка фото Джулия Джоппиен на Неспособный

Оригинал: “https://dev.to/daviddalbusco/lazy-load-youtube-video-iframe-2hf9”