Jump to content

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


Recommended Posts

Есть сайт 

 

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

 

257ffb6df892.png

 

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

 

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

 

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

Link to post
Share on other sites

обыкновенный 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);
    });
  }
}
Link to post
Share on other sites

 

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

Link to post
Share on other sites
  • 1 year later...

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

https://www.feeriya.ru/

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...