Перейти к содержимому


Фото
- - - - -

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


  • Чтобы отвечать, сперва войдите на форум
2 ответов в теме

#1 megauser

megauser
  • Пользователь
  • 79 сообщений
  • Дизайн, Заказчик, Пользователь
  • Откуда:Россия

Опубликовано 11.11.2019 - 01:54

Есть сайт 

 

https://russia.feeri...aljutov_krupnye

 

257ffb6df892.png

 

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

 

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

 

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



#2 shooroop

shooroop
  • Фрилансер
  • 975 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Antarktida

Опубликовано 11.11.2019 - 03:36

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


#3 megauser

megauser
  • Пользователь
  • 79 сообщений
  • Дизайн, Заказчик, Пользователь
  • Откуда:Россия

Опубликовано 11.11.2019 - 13:21

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






0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых