Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

Поиск по сайту

Результаты поиска по тегам 'twitch'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной
    • Новости и анонсы
    • Предложения и пожелания
    • Акции, подарки, конкурсы и награды
  • Opencart 4.x
    • Opencart 4.x: Общие вопросы
    • Opencart 4.x: Установка и обновление
    • Opencart 4.x: Локализация
    • Opencart 4.x: Настройка и оптимизация
    • Opencart 4.x: Песочница
    • Opencart 4.x: Поиск модулей
    • Opencart 4.x: Отчёты об ошибках
  • Opencart 3.x
    • Opencart 3.x: Общие вопросы
    • Opencart 3.x: Установка и обновление
    • Opencart 3.x: Локализация
    • Opencart 3.x: Настройка и оптимизация
    • Opencart 3.x: Песочница
    • Opencart 3.x: Поиск модулей
    • Opencart 3.x: Отчёты об ошибках
  • Opencart 2.x
    • Opencart 2.x: Общие вопросы
    • Opencart 2.x: Установка и обновление
    • Opencart 2.x: Локализация
    • Opencart 2.x: Настройка и оптимизация
    • Opencart 2.x: Песочница
    • Opencart 2.x: Поиск модулей
    • Opencart 2.x / ocStore 2.x: Отчёты об ошибках
  • Реклама и продвижение
    • SEO-вопросы (оптимизация и продвижение магазина)
    • Контекстная реклама
    • Торговые площадки
    • E-commerce tracking и бизнес аналитика
    • Разное
  • Поддержка и ответы на вопросы
    • Общие вопросы
    • Установка, обновление, настройка
    • Шаблоны, дизайн и оформление магазина
    • Модули и дополнения
    • Помощь программистам и разработчикам
    • Мобильная витрина
    • Вопросы безопасности
    • Перевод
    • Отчёты об ошибках
    • Интернет-магазины и электронная коммерция
    • Песочница
  • Services
    • Создание магазинов под ключ
    • Design, layout and templates
    • Programming, creating modules, changing functionality
    • Setting up and minor work on an existing site
    • Обновление версии движка магазина
    • Наполнение магазина
    • Системное администрирование (настройка хостинга, серверов, ПО)
    • Другие услуги
  • Разное
    • Пользовательские обзоры дополнений
    • Примеры сайтов на OpenCart (ocStore)
    • Курилка
    • Предложения по улучшению

Категории

  • Шаблоны
    • Бесплатные шаблоны
    • Платные шаблоны
  • Фильтры
  • Цены, скидки, акции, подарки
  • Реклама и продвижение
  • Бонусы, купоны, программы лояльности
  • Блоги, новости, статьи
  • Покупки, оформление заказа, корзина
  • Опции
  • Атрибуты
  • Серии, Комплекты
  • Поиск
  • SEO, карта сайта, оптимизация
  • Кэширование, сжатие, ускорение
  • Платежные системы
  • Доставки
  • Редакторы
  • Меню, дизайн, внешний вид
  • Слайдшоу, баннеры, галереи
  • Письма, почта, рассылки, sms
  • Обратная связь, звонки
  • Обмен данными
  • Учет в заказе
  • Сравнения, закладки
  • Социальные сети
  • Парсеры
  • Модули
  • Инструменты, утилиты
  • Лицензии
  • Языковые пакеты
  • Прочее
  • Отчеты
  • Сборки
    • ocStore
  • Услуги
    • Графика и дизайн
    • Маркетинг

Категории

  • Служебные документы
  • Оплата
  • Документация Opencart

Категории

  • Общие вопросы
  • Покупка дополнений
  • Для разработчиков
  • Аккаунт
  • Техническая поддержка
  • Финансовый отдел

Блоги

  • Konorws (Разработка и модификация Opencart)
  • Блог mr.Kent)
  • Прожектор Бритни Спирс
  • Layk
  • Продвижение интернет-магазина, seo оптимизация
  • Записная книжка
  • Блог RGB
  • Модули которые сделают сайт лучше
  • Блог веб-студии NeoSeo
  • Useful IT
  • Записи
  • Найденные решения проблем с Opencart
  • ocdroid blog
  • Заметки на полях...
  • Pimur
  • Серж Ткач
  • О жизни, смерти, о бизнесе и Опенкарте
  • Просто мысли от laim731
  • Маркетинг и продвижение интернет-магазина
  • Мой копирайтинг
  • SEO боксинг специального назначения
  • Get-Web Dev
  • Seok
  • Блоги sitecreator-а
  • Best practice
  • Vlad-Egorov-Blog
  • Блог spectre
  • commanddotcom
  • Внимание мошенники
  • Наблюдения обычного человека
  • Блог Rassol2
  • Блог Exploits
  • блог для натуралов
  • Настюша, тут есть темы
  • Пропитано рекламой
  • Tutorial
  • ОтВинта
  • Tg chnls
  • Блог
  • Блог sv2109
  • КАК ОРГАНИЗОВАТЬ НОВОСТНЫЕ ПОДПИСКИ НА БАЗЕ API OPENCART 3/0/2
  • VDS/VPS, серверы под Linux: установка, настройка, оптимизация
  • IT блог
  • Блог
  • Opencart SEO
  • Путёвые заметки о работе магазина NiceBike на платформе OpenCart
  • Blondi Blog
  • Полезные статьи, новости.
  • Блог владельца магазина
  • разное
  • ПРОДАЖА АКАУНТОВ-binance ВЕРИФИЦИРОВАННЫe ЧИСТЫЕ УСПЕВАЙТЕ КУПИТЬ ПО НИЗКОЙ ЦЕНЕ
  • Диспансеризация
  • wozobat
  • quasarbyte
  • Мой блог
  • Igorych
  • aaaaa
  • 👌🔊Bellsouth CUSTOMER support number 1+(8O8)678=9O64-☎phone number
  • Liudmila marketer
  • Заметки реалиста
  • ocstore на ноліках
  • Про Opencart
  • Блог про рутинні процеси в магазині на ocsote
  • Radaevich
  • Плагіни Opencart
  • Крафтовий OpenCart: Старт пригоди. Ціна створення сайту на Опенкарт

Искать результаты в...

Искать результаты, содержащие...


Дата создания

  • Начать

    Конец


Последнее обновление

  • Начать

    Конец


Фильтр по количеству...

Зарегистрирован

  • Начать

    Конец


Группа


Сайт


Skype


Город:


Интересы

  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
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.