根据滚动位置触发video自动播放

我正在编写一个使用scrollorama.js脚本中的Wipe动画的脚本。 我希望能够在滚动深度中的某些标记上实现video自动播放：即，当video页面擦除了另一个时，现在可以完全查看。 我已经弄清楚如何测量滚动深度，我已成功将其记录在我的控制台中。 我已经弄清楚如何测量我滚动的深度，但也许我很累，我不知道如何让video在滚动深度自动播放。 我希望这是一个法律问题，我可以得到一些帮助。 有没有人在那之前尝试过这个？ 这是迄今为止的代码。

enter code here $（document）.ready（function（）{

$（window）.scroll（function（e）{

  var scrollAmount = $('body').scrollTop(); console.log(scrollAmount); 

}）;

  var controller = $.superscrollorama(); var pinDur = 800; // create animation timeline for pinned element var pinAnimations = new TimelineLite(); //pinAnimations.append([TweenMax.to($('#green'), .5, {css:{top:0}})], .5) pinAnimations.append([TweenMax.to($('#intromovie'), .5, {css:{top:0}})], .5 ) pinAnimations.append([TweenMax.to($('#red'), .5, {css:{top:0}})], .5) pinAnimations.append([TweenMax.to($('#blue'), .5, {css:{top:0}})], .5 ) pinAnimations.append([TweenMax.to($('#movie1'), .5, {css:{top:0}})], .5); pinAnimations.append([TweenMax.to($('#history1'), .5, {css:{top:0}})], .5); //pinAnimations.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}})); controller.pin($('#content_wrapper'), pinDur, { anim:pinAnimations, onPin: function() { $('#content_wrapper').css('height','100%'); }, onUnpin: function() { $('#content_wrapper').css('height','1000px'); } }); }); 

Answer 1

我想出来了，所以我在这里拼凑了许多其他答案的帮助下回答我自己的问题！

如果有人有兴趣，html很简单：

Jquery也很简单：

  $(function(){ $(window).scroll(function(e) { var scrollAmount = $('body').scrollTop(); console.log(scrollAmount); if(scrollAmount >="theamountyouwant" && scrollAmount <= "theotheramountyouwant") { $("#videoHolder").html( ''); 

Answer 2

只需从下面添加脚本，然后在页面的任何位置将playonscroll param添加到video标记中。

有时候它需要使用不同于身体的滚动容器，有时它不明显，所以下面的代码对我来说就像一个魅力：

 setInterval(function () { $('video[playonscroll]').each(function () { var videoElement = $(this)[0]; var eTop = $(this).offset().top; var elementOffestY = (eTop - $(window).scrollTop()); var videoOffset = [elementOffestY, elementOffestY+$(this).height()]; if ((videoOffset[0] < 100) && (videoOffset[1] > 350)) { console.log('play'); if (!videoElement.playing) { videoElement.play(); } } else { if (videoElement.playing) { videoElement.pause(); } } }); },300); 

如果你总是使用body容器进行滚动，只需将setInterval更改为$（window）.scroll

并且不要忘记为Video标签元素定义属性：

 Object.defineProperty(HTMLMediaElement.prototype, 'playing', { get: function(){ return (this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2); } })