Question

我必须实现一个设计，其中div占视频iframe的15-20％（youtube视频，vimeo等）。当用户点击视频并开始播放视频时，div应向下滑动（animate marginTop: 0）。然后，当用户再次点击视频以停止它时，div应该出现（marginTop: -100px）。

这是我用来捕捉iframe上的点击事件并动画div滑动的脚本。

jQuery(document).ready( function() {
    var overiFrame = -1;
    jQuery('iframe').hover( function() {
        overiFrame = jQuery(this).closest('.video-container');
    }, function() {
        overiFrame = -1
    });
    jQuery(window).blur( function() {
        if( overiFrame != -1 )
            jQuery('.header-container').animate({
                marginTop: '0'
            })
    });
});

我不知道如何捕获iframe上的第二次点击并将div重新滑动。我尝试使用toggleClass，但在脚本添加了类后，它不会删除它。

稍后修改

我对脚本进行了一些修改，但它仍然无法正常工作。它仅在用户在iframe上单击一次，在iframe外单击一次时才有效，依此类推。如果用户在iframe中多次单击，则动画不起作用。

jQuery(document).ready( function() {
    var overiFrame = -1;
    jQuery('iframe').hover( function() {
        overiFrame = jQuery(this).closest('.video-container');
    }, function() {
        overiFrame = -1
    });

    jQuery(window).blur( function() {
        if( overiFrame != -1 ) {
            if (jQuery('.header-container').hasClass('animate')) {
                jQuery('.header-container').removeClass('animate')
        }   else {
                jQuery('.header-container').addClass('animate')
            } 
        }

    });
});

这是我尝试实施的设计的屏幕截图：

enter image description here

Answer 1

您无法完全了解自己想要什么，因为点击事件无法从跨域iframe进行监听，但我知道如何部分地执行此操作。

这只是一个例子，如果你喜欢，你需要自定义我的解决方案。

提示是 - 使用叠加来获取点击，隐藏叠加层以让用户点击视频，再次显示叠加以获得其他点击。当然，工具提示也会根据您自己设置的点击和动画进行切换。

坏消息 - 所有点击视频都需要双击

HTML

<iframe id="iframe" src="http://www.youtube.com/embed/xFa2_PVMeDQ?rel=0" allowfullscreen="" frameborder="0"></iframe>
<div id="tooltip">tooltip</div>
<div id="overlay"></div>

CSS

#iframe {
    width: 500px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#tooltip {
    position: absolute;
    top: 200px;
    width: 100px;
    height: 50px;
    background: white;
    z-index: 3;
    text-align: center;
    line-height: 2em;
}
#overlay {
    width: 500px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

jquery的

$("#overlay").click(function () {
    $(this).hide();
$('#tooltip').toggle(
 function(){
     $('#another-element').show();
}
,
function(){
    $('#another-element').hide();
}
);
    setTimeout(function () {
        $("#overlay").show();
    }, 500);
});

fiddle

Answer 2

跨域iframe无法捕获点击事件。实际上，它不是完全正确的解决方案，例如，对于youtube，还有一些其他控件（如更改视频质量的按钮，在YouTube网站上观看，更改位置的进度条等）。每次点击都会导致叠加层出现/消失。

如果你有一组有限的视频提供者 - 我建议使用这些提供者的适当API。

E.g。对于youtube视频，有JS API来控制视频。您也可以subscribe to an appropriate event来定义您的行为。
对于vimeo - the same。

iframe onclick animate或toggle

2 个答案: