var galleryVideos = [{
image: 'assets/images/poster/kalakriti.png',
videoURL: 'assets/videos/kalakruti.mp4',
videoTitle: 'Newspaper Fashion @ NITK',
videoDuration: '2.15',
videoDescription : 'Best moments of Anokha 2017. Amazing Rangoli done by students on their fest.',
brandLogo: 'assets/images/brands/oasis.jpg',
brandName: 'Oasis',
videoDate: 'Oct 28, 2017',
id: 'element1',
previewImg: 'assets/videos/nitk.webp'
}, {
image: 'assets/images/poster/tech-rangoli.jpg',
videoURL: 'assets/videos/tech_rangoli_anokha.mp4',
videoTitle: 'Tech Rangoli @ Anokha 2017',
videoDuration: '1.70',
videoDescription : 'Best moments of Anokha 2017. Amazing Rangoli done by students on their fest.',
brandLogo: 'assets/images/brands/talentime.jpg',
brandName: 'Talentime',
videoDate: 'Nov 17, 2017',
id: 'element2',
previewImg: 'assets/videos/anokha.webp'
}, {
image: 'assets/images/poster/crew-jam.jpg',
videoURL: 'assets/videos/crew_jam.mp4',
videoTitle: 'Crew Jam @ UTSAV \'17',
videoDuration: '3.08',
videoDescription : 'Best moments of Anokha 2017. Amazing Rangoli done by students on their fest.',
brandLogo: 'assets/images/brands/spardha17.jpg',
brandName: 'Spardha',
videoDate: 'Dec 20, 2017',
id: 'element3',
previewImg: 'assets/videos/anokha.webp'
}, {
image: 'assets/images/poster/tech-rangoli.jpg',
videoURL: 'videos/tech_rangoli_anokha.mp4',
videoTitle: 'Tech Rangoli @ Anokha 2017',
videoDuration: '1.70',
videoDescription : 'Best moments of Anokha 2017. Amazing Rangoli done by students on their fest.',
brandLogo: 'assets/images/brands/talentime.jpg',
brandName: 'Talentime',
videoDate: 'Jan 4, 2018',
id: 'element4',
previewImg: 'assets/videos/anokha.webp'
}];
$(document).ready(function () {
length = galleryVideos.length;
var i;
for (i = 0; i < length; i++) {
$('.jsCategoriesGallery').append('<div class="videoCard"><div class="thumbnail-section"><div class="jsCategory thumbnail" id="' +galleryVideos[i].id +'" data-title="' + galleryVideos[i].videoTitle + '" data-video="'+galleryVideos[i].videoURL+'"><img class="thumbnailImg" src="'+ galleryVideos[i].image +'" alt="'+ galleryVideos[i].videoTitle+'"><span class="duration">'+galleryVideos[i].videoDuration+'</span></div></div><div class="videoDetails"><h3 class="videoTitle">' + galleryVideos[i].videoTitle + '<p class="videoDescription">' + galleryVideos[i].videoDescription + '</p></div><div class="brandLogo"><img src="' + galleryVideos[i].brandLogo + '"</div><div class="brandDetails"><p>' + galleryVideos[i].brandName + ' | ' + galleryVideos[i].videoDate + '</p></div></div>');
}
function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".thumbnail") ) {
vidId = '#' + elId + '';
console.log( vidId );
$(vidId).css({
'background-image': 'url('+galleryVideos[i].previewImg+')',
'background-position': 'center',
'background-size': 'contain'});
$('.thumbnailImg').css({
'display': 'none'
});
}
}
$(".thumbnail").mouseover(handler);
我正在创建一个视频库，在悬停缩略图时，它应该是一个webp格式的预览图像。我已在数组中声明了详细信息并通过调用它们进行显示。当我将鼠标指针悬停在任何视频缩略图上时，即可获得该div的id并添加该视频的预览图像。但它不显示预览图像。有人可以帮忙吗？