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



 

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

Открыть тему
Добавить ответ в эту тему
> Отложенная вставка медиа ресурсов на сайт
GetWeb
GetWeb
Topic Starter сообщение 2.4.2020, 4:11; Ответить: GetWeb
Сообщение #1


Новичок
*

Группа: User
Сообщений: 29
Регистрация: 19.7.2019
Поблагодарили: 5 раз
Репутация:   1  


Прикрепленное изображение


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


--------------------
Get-Web.site - Качественная верстка сайтов


Поблагодарили: (2)
1
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Ostromir
Ostromir
сообщение 2.4.2020, 13:49; Ответить: Ostromir
Сообщение #2


Бывалый
****

Группа: User
Сообщений: 418
Регистрация: 10.8.2018
Поблагодарили: 38 раз
Репутация:   1  


т.е. эту штука поможет сервису скорости загрузки от гугла не ругаться на собственный же ютуб вставленный на сайте?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
GetWeb
GetWeb
Topic Starter сообщение 2.4.2020, 14:05; Ответить: GetWeb
Сообщение #3


Новичок
*

Группа: User
Сообщений: 29
Регистрация: 19.7.2019
Поблагодарили: 5 раз
Репутация:   1  


Цитата(Ostromir @ 2.4.2020, 11:49) *
т.е. эту штука поможет сервису скорости загрузки от гугла не ругаться на собственный же ютуб вставленный на сайте?

Как-то так) Правда тут тоже есть нюанс, задержка должна быть больше секунды иначе все равно PageSpeed будет ругаться. На одном из последних сайтов, для которого я делал такую загрузку я ставил 3 или 5 секунд, точно не помню.

Гугл сами не придерживаются своих стандартов, я на эту теме небольшую статью на хабре писал: https://habr.com/ru/post/475152/


--------------------
Get-Web.site - Качественная верстка сайтов
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Продам женский сайт на WordPress
33 pishu-text 4590 30.5.2020, 17:47
автор: pishu-text
Горячая тема (нет новых ответов) Вечные ссылки с топовых ресурсов! Выйди в тор 10 и получай трафик!
Мощные беки для вашего сайта с мегатрастовых ресурсов!
90 andrey10tic 40702 29.5.2020, 23:07
автор: andrey10tic
Открытая тема (нет новых ответов) Нужно сделать простой и легкий сайт
2 dota 560 29.5.2020, 0:47
автор: dota
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыОцените киношный сайт
52 serhio123 5768 28.5.2020, 23:50
автор: Dangerboy
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКуплю сайт от 50 чел/сутки
1 tef 213 27.5.2020, 19:00
автор: eoschool


 



RSS Текстовая версия Сейчас: 2.6.2020, 13:17
Дизайн