當新視頻滾動到頁面上查看時如何更改按鈕？

Question

在這個頁面上http://kimcolemanprojects.com/djangolive_1.html有5個視頻。

當你點擊每個視頻時，下一個視頻會滾動到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(); 
}); 

感謝您的時間

安吉拉

Answer 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; 
}