Отложенная вставка медиа ресурсов на сайт

Тема в разделе "JavaScript", создана пользователем L2Banners, 2 апр 2020.

XEvil 4.0 Релиз Состоялся!
  1. L2Banners

    L2Banners Постоялец

    Регистр.:
    15 сен 2017
    Сообщения:
    76
    Симпатии:
    27
    insertmedia.jpg

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

    Когда iframe встроен непосредственно в разметку сайта, то как только начинается загрузка страницы и браузер видит iframe он начинает загружать видео и все ресурсы необходимые для работы плеера. Сайт начинает долго грузится и как не странно жутко лагать вплоть до зависания устройства с которого пользователь посетил сайт. Помимо этого анализ производительности pagespeed insights даже из-за одного видео проседает примерно на 15 пунктов и тут я с ним полностью солидарен, если на сайте стоит preloader, то пользователь вообще может не дождаться загрузки.

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

    Demo: https://get-web.site/insertmedia.html
    Репозиторий на gitHub: get-web/insertmedia

    Чтобы начать использовать необходимо подключить скрипт:
    HTML:
    <script src="../src/insertmedia.js"></script>
    И вызвать его:
    Код:
    document.addEventListener("DOMContentLoaded", function () {
        insertmedia();
    });
    Можно вызвать с опциями:
    Код:
    document.addEventListener("DOMContentLoaded", function () {
      insertmedia({
        delay: 300, // Задержка. default: 300ms
        immediately: true, // тип задержки true/false. Сразу или по очереди каждый "delay" милисекунд. default: true - сразу
        attr: 'data-insertmedia', // Атрибут с конфигурацией вставки. В блок с этим атрибутом будет вставляться наше видео или изображение. default: data-insertmedia
      })
    });
    Блоку в который будет вставляться видео мы добавляем атрибут с параметрами:
    Код:
    data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'
    Например для вставки видео с ютуба мы можем использовать такие настройки:
    Код:
    <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'> </div>
    Доступные опции:
    Код:
    type*:  тип вставляемого ресурса. На данный момент это: youtube , twitch , html5 , img
    src*: Ссылка на ресурс (видео,картинка..) например: https://example.com/img.jpg
    width: Ширина доступная для вставляемого типа ресурса
    height: Высота доступная для вставляемого типа ресурса
    setting: Настройки доступные для вставляемого типа ресурса
    (*) - Обязательно
    В общем идея достаточно проста, мы передаем тип ресурса и ссылку на него без параметров, а уже в setting передаются параметры доступные для данного типа ресурса. Например фрейм ютуба по умолчанию выглядит так:
    HTML:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/6Q6cCuSvFpI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    Мы можем вставить его таким образом (не используя setting или передавая пустую строку "setting": "") :
    HTML:
    <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI" }'> </div>
    Но если мы, к примеру, хотим запустить видео автоматически и без звука, фрейм будет таким:
    HTML:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/6Q6cCuSvFpI?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    Как вы могли заметить к ссылке были добавлены необязательные параметры ?autoplay=1&mute=1 их мы и передаем в setting при использовании скрипта:
    HTML:
    <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'> </div>
    То есть любые параметры описанные в документации к youtube вы можете использовать таким образом. Точно так же передаются параметры и другим типам ресурсов в зависимости от их API. Именно поэтому происходит разделение ссылки и параметров, чтобы можно было их интегрировать под любой тип и иметь возможность правильно составлять шаблоны для последующей вставки.

    Надеюсь я понятно объяснил и мой труд кому-то будет полезен. Если будут вопросы задавайте их тут. Пишите если что-то нужно добавить или исправить, или если хотите покритиковать.



    Источник: https://get-web.site/blog/javascript/43-insertmedia.html