Nano Hash - криптовалюты, майнинг, программирование

Добавьте пользовательское видео на Fotorama — страница продукта Magento 2

Я пытаюсь добавить пользовательское видео в слайдер Fotorama на странице продукта, которое я загрузил в хранилище своего сервера по этому пути: pub/media/videos.

Я уже пробовал этот код, но не работал, как я ожидал...

<script type="text/javascript">
    require(['jquery'], function ($) {
        $(document).on('gallery:loaded', function () {
            var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
            var fotorama = $fotorama.data('fotorama');
            $fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
                if (extra.frame.type === 'iframe') {
                    extra.frame.$stageFrame.html('<iframe align="middle" type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
                }
            });
            fotorama.push({
                thumb: 'pub/media/videos/product/video1.mp4',
                'src': 'pub/media/videos/product/video1.mp4',
                type: 'iframe',
                caption: '<set your caption>'
            });
        });
    });
</script>
javascript php magento2 fotorama
27.07.2020

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

Ответы:


1

Я сделал форк файлов fotorama с простым использованием видео HTML5. Вот функциональный пример того, как использовать мое обновление. Это работает только для видео MP4. Я модифицировал Fotorama js для этой ситуации, с которой я уже сталкивался.

Для получения дополнительной информации и файла README вы можете проверить его на GitHub.

$('.fotorama').fotorama();
<html>
<head>
  <link href="https://cdn.jsdelivr.net/gh/megacarlossm/fotorama-mcsms/fotorama-mcsm.min.css" rel="stylesheet"/>
</head>

<body>

  <div class="fotorama" data-width="100%" data-maxheight="150px" data-nav="thumbs" data-allowfullscreen="true" data-loop="true" data-arrows="always" data-click="true" data-shadows="true">
  
    <a data-thumb="https://us.123rf.com/450wm/tihiychelovek/tihiychelovek1907/tihiychelovek190700099/130611355-cobweb-on-a-dark-background-dark-background.jpg?ver=6" href="http://techslides.com/demos/sample-videos/small.mp4" data-type="video/mp4"></a>
    
    <a data-thumb="https://i.pinimg.com/564x/1c/bb/66/1cbb664a37bcb91ecbe40fae5ec07e11.jpg" href="https://www.prontus.cl/prontusPlayer4/samples/video/PIPER_SHORT_FILM_720p.mp4" data-type="video/mp4"></a>
    
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/megacarlossm/fotorama-mcsms/fotorama-mcsm.min.js"></script>
</body>

29.08.2020

2

Добавление через JavaScript

let video = {
    thumbnail: thumbnail,
    url: url
};
$.when(getGallery()).then(function (result) {
    result.fotorama.data.push({
        videoUrl: video.url,
        src: video.url,
        img: video.thumbnail,
        isMain: false,
        thumb: video.thumbnail,
        type: 'video'
    });
}, function (error) {
        console.log(error);
});
getGallery: function () {
    let dfd = $.Deferred();
    let timer = setInterval(function () {
        let gallery = $('[data-gallery-role=gallery-placeholder]').data('gallery');
        if (typeof gallery != 'undefined') {
            clearInterval(timer);
            dfd.resolve(gallery);
        }
    }, 500);
    return dfd.promise();
}

Добавление через модуль с PHP

Файл app/code/My/Module/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Block\Product\View\Gallery">
        <plugin name="insertProductVideo" type="My\Module\Plugin\Gallery\Gallery" sortOrder="5"/>
    </type>
</config>

Файл app/code/My/Module/Plugin/Gallery/Gallery.php

<?php
namespace My\Module\Plugin\Gallery;
class Gallery
{
    public function afterGetGalleryImagesJson(ImageGallery $subject, $result)
    {
$product = $subject->getProduct();
if ($product->getVideoPath()) {
        $imagesSettings = \Zend_Json::decode($result);
        $imagesSettings[] = [
                'caption' => '',
        'position' => count($imagesSettings) -1,
        'isMain' => false,
        'type' => 'video',
        'videoUrl' => $product->getVideoPath(), // path to product video like /pub/media/video/800x800_8bit_MP4_H264_quality50.mp4
        'src' => $product->getVideoPath(), // path to product video like /pub/media/video/800x800_8bit_MP4_H264_quality50.mp4
        'img' => $product->getPlaceholder(), // path to video placeholder image like /pub/media/placeholder/800x800_placeholder.png
        'thumb' => $product->getPlaceholder(), // path to video placeholder image like /pub/media/placeholder/800x800_placeholder.png
        ];
        $result = \Zend_Json::encode($imagesSettings);
        }
return $result;
    }
}
07.10.2020
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..