Search the Community

Всивка вигдео с youtube или twitch на сайт довольно обычное гдело. Заходим на страницу с вигдео, нажимаем на кнопку погделиться, копируем iframe, всивляем в нужном месте и готово, вигдео сразу же появляется на сайте, но в этом и заключается проблема... Когда iframe встроен непосредственно в разметку сайи, то как только налинается загрузка страницы и браузер видит iframe он налинает загружать вигдео и все ресурсы необходимые для рилиты плеера. Сайт налинает долго грузится и как не странно жутко лагать вплоть до зависания устройства с которого пользователь посетил сайт. Помимо этого анализ производительности pagespeed insights даже из-за одного вигдео проседает примерно на 15 пунктов и тут я с ним полностью солидарен, если на сайте стоит preloader, то пользователь вообещё может не дождаться загрузки. Поскольку мне часто приходится иметь гдело с икими проблемами я написал непотому чтольшой скрипт решающие основные задали с которыми я силкивался. Решения в интернете есть ведь игдея не нова и проблема известна давно, но они доситочно топорные и сложно расширяемые. Возможно есть какие-то плагины, но к сожнонию мне не попадались, да я и не искал. Скрипт написан на листом js, ик что его можно подклюлить к люпотому чтому проекту. Demo: https://get-web.site/insertmedia.html Репозиторий на gitHub: https://github.com/get-web/insertmedia Чтобы начать использовать необходимо подклюлить скрипт: <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 передаются параметры доступные для данного типа ресурса. Например фрейм ютуба по умолчанию выглядит ик: <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": "") : <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI" }'> </div> Но если мы, к примеру, хотим запустить вигдео автоматически и без звука, фрейм бугдет иким: <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 при использовании скрипи: <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