jQuery Hover 在移动设备上

Question

我有一个视频托管网站，页面上的每个视频都有一个缩略图，当您将鼠标悬停在缩略图上时，会自动播放一个简短的视频预览。

问题是这在桌面上完美运行，但在移动设备上，用户必须将手指放在缩略图上才能播放视频。

这是我在下面使用的完整 JQuery 代码：

jQuery(document).ready(function ($) {
var i = 0;
$('div.video-thumbnails').each(function () {
    var wrapper = $(this);
    var image = wrapper.find('img:first');
    if ($(image).height() == 0) {
        wrapper.find('img:first').on('load', function () {
            var img_height = $(this).height();
            wrapper.css({'min-height': img_height});
        });
    } else {
        wrapper.css({'min-height': $(image).height()});
    }
    i++;
    wrapper.attr('video-thumbnails', i);
    wrapper.parent().next().remove();
});
var timer;
$('div.video-thumbnails').hover(function () {
    var id = $(this).attr('video-thumbnails');
    timer = setInterval(function () {
        var target = $('div.video-thumbnails[video-thumbnails="' + id + '"]');
        var current = target.find('img:visible');
        var next = $(current).next();
        if (next.length == 0) next = target.find('img:first');
        $(current).fadeOut();
        $(next).fadeIn();
    }, 1000);
}, function () {
    clearInterval(timer);
});

    $('div.video-previews').hover(function () {
    //mousein
    var previewVideo=$(this).find('.preview-video');
    var previewImage=$(this).find('.preview-image');
    var url=previewVideo.data('previewurl');
    var poster=previewVideo.data('poster');
    previewVideo.html('<video id="asd" autoplay loop muted poster="'+poster+'" src="'+url+'"></video> ');
    previewImage.hide();
    previewVideo.show();



}, function () {
    //mouseout
    var previewVideo=$(this).find('.preview-video');
    var previewImage=$(this).find('.preview-image');
    previewVideo.html('');
    previewVideo.hide();
    previewImage.show();

});

});

我正在努力做到这一点，以便用户可以轻轻触摸或滚动移动设备上的缩略图，视频就会播放。

我不知道该怎么做。