X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

История благодарностей участнику GetWeb. Поблагодарили: 4 раз(а)
Дата поста: В теме: За сообщение: Поблагодарили:
Вчера, 4:11 Отложенная вставка медиа ресурсов на сайт
[attachment=31770:insertmedia.jpg]

Вставка видео с 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


Спасибо сказали: (1)
16.12.2019, 20:29 Beget или Fozzy? Или вообще другой хостинг? Выбираем лучший.
Цитата(Totleben @ 16.12.2019, 13:06) *
Для одних виртуальный сервер - это гремучий лес, в котором как им кажется "сам черт ногу сломит", а другие, даже если и вразумеют, им надо по быстрому к примеру сайт развернуть.

Цитата(M25 @ 16.12.2019, 13:50) *
Это дополнительные человеко-часы на настройку и обслуживание, это нужно или самому становиться девопсом, или платить специалисту.

Цитата(SemanticaGuru @ 16.12.2019, 15:09) *
Но далеко не все умеют да и хотят разбираться в настройках и обслуживании VDS.


На том же firstvds покупаем vds сразу с панелью ISPmanager и пользуемся как обычным хостигом, только без ограничений. Когда наступит время используем всю мощь без переездов и доплат.


Цитата(M25 @ 16.12.2019, 13:50) *
... закрывать дыры и следить за уязвимостями.

Если действительно что-то важное на firstvds предупреждают и составляют инструкцию

Цитата(M25 @ 16.12.2019, 13:50) *
Плюс самому обновлять версии пхп, mysql и прочего софта

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

Цитата(SemanticaGuru @ 16.12.2019, 15:09) *
Плюс некоторым он вообще не нужен, с лихвой хватает обычного хостинга.

Ну некоторым и сайтов конструкторов хватает это дело такое, всему свой инструмент.

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


Спасибо сказали: (1)
27.7.2019, 19:53 Заблокирует ли webmoney ?
Заходил где-то год назад на старый аккаунт ничего не было, формальный аттестат


Спасибо сказали: (1)
21.7.2019, 14:46 Подробный гайд по оптимизации изображений
wpmaster.kz - Блог о WordPress для веб-мастеров.
WEBp очень интересный формат, отличное сжатие, жаль что еще слабая поддержка браузерами, пару лет придется подождать.
Из онлайн сервисов для сжатия изображений мне очень понравился squoosh, там гибкая система оптимизации.



Спасибо сказали: (1)

RSS Текстовая версия Сейчас: 3.4.2020, 15:24
Дизайн