Как сменить кнопку, когда новое видео прокручивается вверх на страницу?

Question

На этой странице 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(); 
}); 

Спасибо за ваше время

Angela

Answer 1

Этот код ниже добивается того, чего я хотел, и больше, это не только делает кнопка соответствует видео, прокручивают в поле зрения, он также приостанавливает видео при прокрутке вне поля зрения, и когда видео закончит воспроизведение, он прокручивает следующий вверх и просматривает его автоматически. Спасибо jakecigar на форуме jQuery.

$.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; 
}