Перейти к содержанию
Официальный форум поддержки Simpla

Как сделать блок с видео вставкой.


Рекомендуемые сообщения

Есть сайт 

 

https://russia.feeriya.ru/catalog/batarei_saljutov_krupnye

 

257ffb6df892.png

 

На нем присутствует при наведении иконка видео( а если на нее навести, то включается видео) , подскажите как тут реализовано? нужно точь такое же.

 

Видео файлом к товару прикрепил, и могу вывести его в тег видео. 

 

Но я так думаю что надо чтоб при наведении он аяксом подгружался? натолкните на мысль, спасибо.

Ссылка на сообщение
Поделиться на другие сайты

обыкновенный jq событие при наведение мышкой mouseover 

 

function() {
  var video_parent = $(this).parent().parent().find('.product-block__video-wrapper'),
    video_block = video_parent.find('.product-block__video'),
    video_id = video_block.attr('data-video');
  if (video_block.length && video_id.length) {
    video_block.empty();
    video_parent.addClass('active');
    var video = $('<video allow="autoplay"></video>'),
      video_wrapper = $("<div id='player_catalog_grid'/>");
    $(["mp4"]).each(function(i, type) {
      video.append($("<source/>").attr({
        src: "https://data.feeriya.ru/video/" + video_id + "." + type,
        type: "video/" + type
      }));
    });
    video_block.append(video_wrapper);
    video_wrapper.append(video);
    video_wrapper.flowplayer({
      key: '$303743110049035',
      ratio: 9 / 16,
      volume: 1
    }).one('ready', function(ev, api) {
      api.play();
      api.volume(1);
    });
  }
}
Ссылка на сообщение
Поделиться на другие сайты

 

обыкновенный jq событие при наведение мышкой mouseover 

 

function() {
  var video_parent = $(this).parent().parent().find('.product-block__video-wrapper'),
    video_block = video_parent.find('.product-block__video'),
    video_id = video_block.attr('data-video');
  if (video_block.length && video_id.length) {
    video_block.empty();
    video_parent.addClass('active');
    var video = $('<video allow="autoplay"></video>'),
      video_wrapper = $("<div id='player_catalog_grid'/>");
    $(["mp4"]).each(function(i, type) {
      video.append($("<source/>").attr({
        src: "https://data.feeriya.ru/video/" + video_id + "." + type,
        type: "video/" + type
      }));
    });
    video_block.append(video_wrapper);
    video_wrapper.append(video);
    video_wrapper.flowplayer({
      key: '$303743110049035',
      ratio: 9 / 16,
      volume: 1
    }).one('ready', function(ev, api) {
      api.play();
      api.volume(1);
    });
  }
}

 

 

 <div class="product-block__video-btn" data-video-file="{$product->id}"  data-video="{$product->id}">VIDEO</div>
 
 <div class="product-block__video-wrapper">
        <div class="product-block__video" data-video="{$product->id}"></div>
      </div>

Добавил блок на который наводить и блок обложки куда будет подгружаться видео.

 


$(".product-block__video-btn").on("mouseover", function(){
  var video_parent = $(this).parent().parent().find('.product-block__video-wrapper'),
    video_block = video_parent.find('.product-block__video'),
    video_id = video_block.attr('data-video');
    video_block.empty();
    video_parent.addClass('active');
    var video = $('<video allow="autoplay"></video>'),
      video_wrapper = $("<div id='player_catalog_grid'/>");
    $(["mp4"]).each(function(i, type) {
      video.append($("<source/>").attr({
        src: "https://site.ru/video/" + video_id + "." + type,
        type: "video/" + type
      }));
    });
    video_block.append(video_wrapper);
    video_wrapper.append(video);
    video_wrapper.flowplayer({
      key: '$303743110049035',
      ratio: 9 / 16,
      volume: 1
    }).one('ready', function(ev, api) {
      api.play();
      api.volume(1);
    });
});

flowplayer подключил, думаю с ним после разобраться, при наведении js не срабатывает , где ошибся?

Ссылка на сообщение
Поделиться на другие сайты
  • 1 год спустя...

Тема по прежнему актуальная, стоит прикрепление файла от ps-simpla.  То есть только один файл прикрепляется. Требуется аяксом при наведении на угол товара чтоб аяксом подгружалось видео и воспроизводилось. Аналогично с сайтом 

https://www.feeriya.ru/

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...