根据滚动位置触发视频自动播放
我正在编写一个使用scrollorama.js脚本中的Wipe动画的脚本。 我希望能够实现视频以自动播放滚动深度中的特定标记：即当视频页面已被另一个视频页面擦除时，现在可以完全观看。 我已经想出了如何测量滚动深度，我成功地将其记录在我的控制台中。 我已经想出了如何衡量我滚动的深度，但也许我太累了，我不知道如何让视频在滚动深度自动播放。 我希望这是一个法律问题，我可以得到一些帮助。 有没有人在那里试过这个？ 这是迄今为止的代码。
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');
}
});
});
我明白了这一点，所以我回答了我自己的问题，在这里一起补充了很多其他答案！
如果有人感兴趣，html很简单：
<div id="videoHolder"></div>
Jquery也很简单：
$(function(){
$(window).scroll(function(e) {
var scrollAmount = $('body').scrollTop();
console.log(scrollAmount);
if(scrollAmount >="theamountyouwant" && scrollAmount <= "theotheramountyouwant") {
$("#videoHolder").html(
'<video width="1200" height="700" autoplay>' +
'<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.webm" type="video/webm"></source>' +
'<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.mp4" type="video/mp4"></source>' +
'</video>');
只需从下面添加脚本并将playonscroll参数添加到页面上任意位置的视频标签。
有时候需要使用不同的滚动容器，而不是明显的，所以下面的代码对我来说就像是一种魅力：
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
不要忘记为视频标签元素定义属性：
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
return (this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})