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/

对锚标记的双重操作

1 个答案: