锚点标签上的双重动作

Question

我正在创建一个主播放器的视频画廊。

当用户点击链接时，youtube视频将在主视频播放器中播放。由于一些视频将出现在下面的文件夹，我希望页面滚动起来，以便用户可以看到主视频播放器。

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

这样的事情有可能发生吗？

请帮帮忙。

谢谢

Answer 1

我已经用你想要的功能做了一个简单的演示。因为你的视频“链接”只是作为页面上事件的触发器，所以你甚至不需要使用<a>锚元素。您可以很容易地使用span或任何其他元素(您可能还希望将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/