javascript - 需要滑动视频的解决方案

Question

我的手机视口(viewport)上有一系列图片/视频，我添加了向左/向右滑动的功能来让用户浏览，仅适用于图像，但一旦显示视频，我就无法再滑动视频了。关于如何解决它有什么建议吗？谢谢。

$('.sectionTwo_mainPic').on("swipeleft", function(event){   
    counter ++; 
    var thumbImgSrc= $(".portfolioThumb:eq("+counter+")").attr("src");
    resetBigDisplay();
    console.log("swiped left");
    $(this).append('<img class="imgSrc" src="'+thumbImgSrc+'">');

    $(".hint").show();
    var bigImageTotal = $(".has-sub.active .sectionTwo_thumbnail img").length;
    console.log("total is " + bigImageTotal);           
    console.log("counter = " + counter);

    if(counter == bigImageTotal ){
        counter = 0;
    }

    var urlCheck = $(".has-sub.active img:eq("+counter+")").attr("src");
    var checkIfYoutube = "youtube";
    console.log("urlCheck is : "+urlCheck);

    /* if the thumbnail src contain img from youtube, then retrieve id and display video
    ================================================== */
    if(urlCheck.indexOf(checkIfYoutube) > 1){
        resetBigDisplay();
        console.log('youtube found');
        var parts = urlCheck.split('/');
        var youtubeSrc = "http://www.youtube.com/v/"
        var mainVideo = youtubeSrc + parts[4];

        $(this).append('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item videoSrc" src="'+mainVideo+' "</iframe></div>">');

        $("#sectionTwo_mainPic .video").show().siblings().hide();
    }
    else {
        console.log('youtube not found');
    }
});         


$('.sectionTwo_mainPic').on("swiperight", function(event){  
    resetBigDisplay();
    counter = counter -1;
    console.log("counter is now " + counter);
    var thumbImgSrc= $(".portfolioThumb:eq("+counter+")").attr("src");

    console.log("swiped right");
    $(this).append('<img class="imgSrc" src="'+thumbImgSrc+'">');

    var urlCheck = $(".has-sub.active img:eq("+counter+")").attr("src");
    var checkIfYoutube = "youtube";
    console.log("urlCheck is : "+urlCheck);

    /* if the thumbnail src contain img from youtube, then retrieve id and display video
    ================================================== */
    if(urlCheck.indexOf(checkIfYoutube) > 1){
        resetBigDisplay();
        console.log('youtube found');
        var parts = urlCheck.split('/');
        var youtubeSrc = "http://www.youtube.com/v/"
        var mainVideo = youtubeSrc + parts[4];

        $(this).append('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item videoSrc" src="'+mainVideo+' "</iframe></div>">');

        $("#sectionTwo_mainPic .video").show().siblings().hide();
    }
    else {
        console.log('youtube not found');
    }
});
}   

Answer 1

我们的应用程序也有类似的问题。目前，我们通过显示预览图像而不是视频来解决这个问题，当用户通过单击预览图像加载视频时，我们会显示替代控件 - 左右按钮，以便他可以切换页面。

我们也在寻找更好的解决方案。