javascript - 锚标记的双重动作

Question

我正在用一个主要播放器创建视频库。

当用户点击链接时，youtube 视频将在主视频播放器中播放。由于某些视频将出现在首屏下方，因此我希望页面向上滚动，以便用户可以看到主视频播放器。

当用户单击标签时，我需要采取双重行动。1) 打开视频 2) 向上滚动

这样的事情甚至可能吗？

请帮忙。

谢谢

Answer 1

我用您正在寻找的功能制作了一个简单的演示。因为您的视频“链接”只是作为页面事件的触发器，所以您甚至不必使用<a>锚元素。您可以轻松地使用 aspan或任何其他元素（您可能还希望将body选择器替换为更具体的容器元素的选择器）：

$(document).ready(function(){ 
    $('#video-link').on('click', function(e) {
        //Scroll the user down to the video
        $('body').animate({
            'scrollTop': $('#video-player').offset().top + 'px',
        }, 400, function() {
            //Start playing the embedded video
            var src = $('#video-player').attr('src');
            $('#video-player').attr('src', src + '?autoplay=1');
        });
    });
});

请注意，此代码通过将自动播放标记附加到嵌入视频的src属性来触发视频播放，这有助于避免在尝试以其他方式触发视频时可能遇到的一些跨域安全限制。

另请注意，此解决方案将一个动作（例如 - 播放视频）安排在另一个动作（例如 - 滚动页面）之后。这确保了用户不会错过任何视频内容，而页面仍在滚动，因为视频不在视野范围内。

jsFiddle 演示：http: //jsfiddle.net/nzkKv/5/