Question

我在手机视口上有一系列图片/视频，我添加了swipeleft / right功能，让用户浏览，只为图像工作正常，但一旦显示视频，我就无法再刷视频了。关于我如何解决它的任何提示？感谢。

$('.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

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

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

需要解决方案来刷视频

1 个答案: