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

[megauser]

Есть сайт 

 

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

 

 

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

 

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

 

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

[shooroop]

обыкновенный 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);
    });
  }
}

[megauser]

 

обыкновенный 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 не срабатывает , где ошибся?

[megauser]

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

https://www.feeriya.ru/

[shooroop]

ну вроде я все ясно расписал, если не получается пиши сделаю за $