是否有任何 HTML5 或 Jquery 插件可以显示本文中的视频？

Question

我正在尝试制作一个类似这篇文章的网页

http://www.nytimes.com/interactive/2015/04/19/arts/artsspecial/new-whitney-museum.html?_r=1

您可以向下滚动文本，当视频占据屏幕的一部分时，它会自动上升以占据整个屏幕，然后自动播放。它还会暂时禁用滚动。如果您滚动到顶部然后再向下滚动，则会重复此过程。

是否有任何插件已经实现了这个，或者我必须自己制作？

Answer 1

你真的不需要插件

您可以这样做，首先检查 scrollTop（即到顶部的距离）是否高于您的视频到顶部的距离。

如果它更高，那么我们将播放视频。

$(window).scroll(function () {
    if ($(this).scrollTop() > $('video#yourVideoId').offset().top) {
       $('video#yourVideoId'').trigger('play');
    }
});