当新视频向上滚动到页面上时如何更改按钮？答案

【问题标题】：how to change button when new video scrolls up into view on page?当新视频向上滚动到页面上时如何更改按钮？
【发布时间】：2012-12-12 00:44:45
【问题描述】：

在此页面http://kimcolemanprojects.com/djangolive_1.html 上有五个视频。

当您单击每个视频时，下一个视频会向上滚动到 jQuery 视图中。

由于这个 jQuery 效果，我不得不禁用视频控件。所以我决定在每个视频的左侧放置一个播放/暂停按钮。

但是，我现在需要一些帮助来制作一个脚本，该脚本将在每个新视频滚动到视图中时更改按钮。我有一段脚本可以在不同视频滚动进入视图时更改标题，这也在每个视频的左侧，请参阅下面的脚本。

$(window).load(function(){
// Scroll to titles on click
$('a').on('click', function() {
var target = $(this).attr('href');
$('html,body').animate({
scrollTop: $(target).offset().top
}, 'slow');
return false;
});
// jQuery `inView`-expression
$.extend($.expr[':'], {
inView: function(el) {
var width = $(el).width(),
height = $(el).height(),
offset = $(el).offset(),
vp_dimensions = {
height: $(window).height(),
width: $(window).width()
},
y_offset = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop),
x_offset = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
return (
offset.top < (y_offset + vp_dimensions.height) && offset.left < (x_offset + vp_dimensions.width) && (offset.top + height) > y_offset && (offset.left + width) > x_offset);
}
});
// Change the titles on scroll
$(window).scroll(function() {
$('li').each(function() {
var self = $(this),
title = self.find('video').attr('title');
if (self.is(':inView')) {
$('#title').find('h2').text(title);
}
});
}).scroll();
});

感谢您的宝贵时间

安吉拉

【问题讨论】：

视频向下滚动时应该怎么做？它应该继续播放还是停止？我有点困惑，因为您只固定了一个播放按钮...
每个视频都有单独的按钮。当它操作的视频滚动到视图中时，我只想将相关按钮固定在那里。我需要正在播放的视频在用户点击它并向下滚动时立即停止。

标签： jquery button video controls

【解决方案1】：

下面的这段代码实现了我想要的以及更多，它不仅使按钮对应于滚动到视图中的视频，它还在滚动出视图时暂停视频，当视频播放完毕时它会滚动下一个进入视野并自动播放。感谢 jQuery 论坛上的 jakecigar。

$.extend($.expr[':'], { // jQuery `inView`-expression
inView: function (el) {
var width = $(el).width(),
height = $(el).height(),
offset = $(el).offset(),
vp_dimensions = {
height: $(window).height(),
width: $(window).width()
},
y_offset = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop),
x_offset = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
return(
offset.top < (y_offset + vp_dimensions.height) && offset.left < (x_offset + vp_dimensions.width) && (offset.top + height) > y_offset && (offset.left + width) > x_offset);
}
});
var video;
$(function (){
video=$('video:first').get(0)
$('a').on('click', function () {
var target = $(this).attr('href');
$('html,body').animate({
scrollTop: $(target).offset().top
}, 'slow')
return false;
});
$('video').on('ended',function(){
$(this).parents('a').click()
setTimeout(vidplay,1000)
})
});
$(window).scroll(function () {
$('video:not(:inView)').each(function () {
this.pause()
})
video = $('video:inView:last').get(0)
if(video) $('#title').find('h2').text(video.title)
}).scroll();
function vidplay() {
if(video.paused) {
video.play();
$('#play').text("||");
} else {
video.pause();
$('#play').text(">");
}
}
function percent(){
return (video.currentTime/video.duration*100).toFixed(0)+'%'
}
function restart() {
video.currentTime = 0;
}
function skip(value) {
video.currentTime += value;
}

【讨论】：